How to fix div with “display: table-cell;” not affected by margin with CSS?

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.