Why does div display: table-row ignore margin?
Why does div display: table-row ignore margins?
You may have encountered a situation where you have several div elements next to each other with the attribute display: table-cell, but there is no margin between them. If you want to set a margin between them, you need to add margins externally.
In this article, we will look at why display: table-row ignores margins and how to add margins if we want to.
How to Add Margins to a Table
You might be thinking that if we add margins from the outside of a table row, that this would add margins to the table. However, let’s see what happens when we add margins from the outside.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of adding the margin to the table</title>
<style>
.dog{
display: table-cell;
margin: 50px;
background-color:green;
}
.frog{
display: table-cell;
margin: 50px;
background-color:blueviolet;
}
</style>
</head>
<body>
<div class="dog">100</div>
<div class="frog">200</div>
</body>
</html>
In the code above, we created a container div, added two numbers to it, and gave them classes. Then, in the CSS, we changed the display type of both containers to table-row and added margins to the outside. Let’s take a look at the output to see if the margins were added.
In the output above, you can see that no margin was added between the two containers. Remember, we changed the display type of both to table-row.
Now, you might be wondering why this happened. Margins should be added to table rows, so why are they ignored here?
The margin property we’re using here applies to all elements except those with the table-display type, which means it doesn’t work with the table-cell property. The padding property also doesn’t create space between table cells. So, how can we do this?
We can add margins to these table cells using different methods, including the border-spacing property and using the margin property in different ways.
Using the border-spacing property
The first method we’ll look at is the border-spacing property, which is applied to a parent element with the display set to “table layout” and border-collapse.
And, here’s the code for it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of adding the margin to the table</title>
<style>
.table {
display: table;
border-collapse: separate;
border-spacing: 15px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">Hi everyone</div>
<div class="cell">Welcomme to another tutorial</div> <div class="cell">We will learn about how to add margins</div>
</div>
</div>
</body>
</html>
In the code above, we first created the div elements and gave them classes. Then, in the CSS, we added the border-collapse property and set the display mode to table-cell. Let’s see what the output looks like after using this code.
In the output above, you can see that after using the border-spacing property, margins have been added between the table cells.
Using the Margin Property
The second method we’ll use is to add margins to the inner DIV. When we added margins to the outer DIV, the margins didn’t work. Margins will work within the inner DIV, so let’s look at another example so we can understand how margins work.
Example
In the following example, we create two divs and nest them. Within the outer divs, we use the display property and set its value to table cell. We also assign two different colors to these divs.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the margin property on the inner DIVs</title>
</head>
<body>
<div style="display: table-cell;">
<div style="margin: 15px; background-color: lightgreen;">
Hi everyone welcome to another tutorial!!
</div>
</div>
<div style="display: table-cell; ">
<div style="margin: 25px; background-color: lightblue;">
Good Morning!!
</div> </div>
</body>
</html>
In the output above, you can see that the green and blue sections are separated by a margin, which means that the margins declared in the inner divs increase the margins between the table cells.
Conclusion
The margin property can add space between elements, but it doesn’t work for elements displayed in a table. Margins are important for aligning elements on a web page. Aligning elements ensures readability and clarity for users and makes the website look cleaner.