Sometimes, we want to fix div with "display: table-cell;" not affected by margin with CSS.
In this article, we’ll look at how to fix div with "display: table-cell;" not affected by margin with CSS.
How to fix div with "display: table-cell;" not affected by margin with CSS?
To fix div with "display: table-cell;" not affected by margin with CSS, we set the border-spacing
property.
For instance, we write
<div class="table">
<div class="row">
<div class="cell">123</div>
<div class="cell">456</div>
<div class="cell">879</div>
</div>
</div>
to add nested divs.
Then we write
.table {
display: table;
border-collapse: separate;
border-spacing: 5px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
to set border-spacing
to 5px to set the margin between the inner divs to 5px horizontally and vertically.
Conclusion
To fix div with "display: table-cell;" not affected by margin with CSS, we set the border-spacing
property.