The flexible box model is very popular. Many websites use this feature to build modern desktop and mobile web applications. It should be used for the correct placement of HTML elements on a web page. HTML elements may be dynamic and fluid. Also, they can easily adapt to the changes of the layout.
There is a very important benefit of the CSS flexible model. It allows you to correctly align elements on a web page. You can do it on both the main and cross axis.
However, there may be a case when you need to add spacing between flexible elements. This tutorial will help you to solve that issue. Below, we provide you the options that you can use to add such a distance between elements on a page.
Using the CSS gap property
You can use the gap property to set the distance between HTML elements. It allows you to specify values for both row-gap and column-gap properties in a single line. If the second value is not specified, then the column-gap property is set to the same value that is provided for the row-gap property.
It is worth mentioning that the gap property can be used to set distance for various elements. The value that you provide may be applied to HTML columns, flexible or grid containers.
That is a convenient method of setting spacing between elements. You can create a rule that will work on both mobile, desktop and tablet devices.
To show how it works, we've created a very simple HTML and CSS code. The wrap class specifies a container that holds the inner elements. It uses display: flex; code to enable the flexible box model. Also the inner elements are positioned in the center of the parent element. That's done with help of the justify-content: center; rule.
Also, we use the 10px value for the gap property. The child elements are small boxes of a width and height of 130px.
The full CSS code can be seen below.
.wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 130px;
height: 130px;
}Also, following is the HTML code that uses the given CSS styles.
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>Now, let's try to combine all the code together. If we make a web application that consists of the given code blocks, the final web page may look as it's shown below.
As you see, there are white gaps between the green boxes. It means that the gap property works correctly.
Using the CSS row-gap property
The row-gap property should be used if you want to set the spacing for the rows only. For example, this would be useful if you create a table in HTML.
It is important to note that you can use both fixed and percentage values for this property. In other words, you may specify values like 10px, 20px. Also, the values such as 10% or 15% are also acceptable.
To show how this method works, we've created a CSS code that uses the row-gap property. It is set to the value of 10px. Also, we've applied this spacing for the flexible box model. You can see the display: flex; code there. The inner elements are rectangles of a width of 150px and height of 100px.
Please see our CSS styles below.
.wrap {
display: flex;
flex-direction: column;
row-gap: 10px;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 150px;
height: 100px;
}You can use HTML code that was shown in the previous section of this tutorial. There is no need to change anything there. Names of the CSS classes are the same.
Now, let's see how the row-gap property works in the browser.. The preview of the given CSS code is shown below.
Using the CSS column-gap property
There may be a situation when you need to add a column to the HTML page. However, you may also want to specify the spacing. In that case, the column-gap property should help you.
It's similar to the row-gap property. You can set a fixed or percentage value. However, the difference is that the column-gap property sets a distance that appears between columns instead of rows.
We've created a very simple CSS code that shows how this method works. As always, we use the flexible container, because it's very popular. The column-gap property is set to a value of 10px. Also the inner elements are aligned in the center of the parent container. See the full source code below.
.wrap {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
justify-content: center;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 130px;
height: 130px;
}To see how the given CSS styles work, you may use the same HTML code that is shown in the previous section of this tutorial.
Following is the preview of the final web page that contains both the HTML and CSS code. You may see there how green boxes are aligned when the column-gap property is set on a flexible container.
Using the margin property
There is a classic method that allows you to set distance between HTML elements. You may provide a value for the margin property.
Following is the CSS code that shows how this can be done. The parent container should have the wrap class. It's a flexible box element that also has a rule that aligns child elements in the center.
The inner elements should use the item CSS class. The margin property is set to the value of 10px.
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 130px;
height: 130px;
margin: 10px;
}The disadvantage of this method is that there may be gaps on the left and right side of the parent container. To see how it can be solved, please see the next section of this tutorial. There we show an example of the code that shows how this problem may be avoided.
Also, below you can see a preview of the given CSS code.
Using the margin property with negative offsets
As you see, the margin property allows you to easily set a distance between the HTML elements. It may work with various box models.
However, the issue is that there may be spacing on the left or right sides of the parent container. But, there is a solution that may help you in such a case. You may set a negative margin for the parent container. See how it's done in the following code sample. We've added margin: 0px -10px; code to the wrap class.
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0px -10px;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 130px;
height: 130px;
margin: 10px;
}Now, let's see how the given method works. Below, you can see our preview of the above code.
The green boxes are aligned the same as in the previous demo. But, you may see a little difference when you resize the browser window. Or you may use the code inspector in a browser to see how the new layout is positioned on the screen.
Using the padding property
You may also use the padding property to set a distance between HTML elements. However, this method is not standard and may not be suitable in all cases. But, just in case you ever want to use it, we will show how it works.
The idea behind this method is that we create an additional div element that contains our child item. Then, we set a desired padding on that new div element. The child element remains almost the same. There are border, background, width and height properties. However, the CSS selector is more detailed, it looks like this: .wrap > .item-outer > .item.
Following is our CSS sample that shows the final code. Please pay attention that we use the item-outer class for our intermediate div element.
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0px -10px;
}
.wrap > .item-outer {
padding: 10px;
}
.wrap > .item-outer > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 130px;
height: 130px;
}Below is the HTML code that you should use. It's not the same as it was provided in the previous sections of this tutorial. There are child elements that are wrapped into the intermediate div elements.
<div class="wrap">
<div class="item-outer">
<div class="item"></div>
</div>
<div class="item-outer">
<div class="item"></div>
</div>
<div class="item-outer">
<div class="item"></div>
</div>
<div class="item-outer">
<div class="item"></div>
</div>
<div class="item-outer">
<div class="item"></div>
</div>
</div>Now, let's see how the given code looks in a browser. But, there is an important note, there may be white gaps on the left and right sides of the parent container. That's because we use the padding: 10px; code to set a spacing on our elements.
Using the white borders
This method of setting a spacing is also unusual. There is not any margin or padding value added to the HTML elements. The distance is made with the help of the border color.
For example, if the background color is white, then we set the border color to the white as well. In other words, the background color must match the border color.
Technically, the border does exist in a CSS code. But visually, there is a spacing between adjacent HTML elements.
Following is our example that shows how to implement this method in a CSS code.
html {
background: #ffffff;
}
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wrap > .item {
border: 5px solid #ffffff;
background: #00ff00;
width: 130px;
height: 130px;
}Also, you should use the HTML code like it's shown below.
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>As you may see in the preview below, there are white gaps between green boxes.
Using the CSS justify-content property
In the previous sections of this tutorial, we've shown how to use a fixed value as a distance between flexible elements. However, there is a way to tell the browser how to automatically place elements in a parent container with the correct spacing.
For that purpose, you can use the justify-content property. There are specific rules that define how the HTML elements are allocated on the axis of a given container.
Below, you can see which values may help to set a distance between elements.
Using the space-between alignment type
This alignment type should be a good option to add a spacing. It may be used to build columns on a web page. The left element has no left spacing. The and the right element has no right spacing. The distance between inner elements are the same.
Please see the following CSS code that shows how the space-between alignment type should be used in a code.
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 20%;
height: 130px;
}Below, you can see a preview of the given CSS code.
Using the space-around alignment type
The space-around alignment type works a bit differently. For each element, the spacing on the left side equals the spacing on the right side.
It means that there will be a gap on the left side of the left container and on the right side of the right container. Those gaps are twice smaller than the gaps between the given elements.
The following CSS code shows how to use the space-around alignment type.
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 20%;
height: 130px;
}Below is our example that shows how this alignment type works in a browser.
Using the space-evenly alignment type
You may also use the space-evenly alignment type. If it's added to the CSS, the distance between each element is the same. Also that distance equals the gap on the left side of the left item and equals gap on the right side of the right item. Please see below how to use this method in a CSS code.
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
}
.wrap > .item {
border: 1px solid #ff0000;
background: #00ff00;
width: 20%;
height: 130px;
}Also, following is our preview of the space-evenly alignment type.
Conclusion
It's very easy to add a spacing between HTML elements. There are many different methods that you can use in your code. Some web developers may prefer to use the gap property. It works very well with the flexible and grid containers.
Also, you may consider using other methods, like margin or padding properties. But, as you see in this tutorial, each method has both advantages and disadvantages. As a result, it is worth trying to implement each option in your project. Then, you may choose the solution that works best in your case.
Comments