How to add space between divs display table-cell with CSS?

Spread the love

To add space between divs display table-cell with CSS, we set the border-spacing.

For instance, we write

<div class="table">
  <div class="row">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
  </div>
</div>

to add some divs.

Then we write

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  background-color: gold;
}

to make the outer div display as a table with display: table;.

And we add spacing between each cell with border-spacing: 10px;.

Leave a Reply

Your email address will not be published. Required fields are marked *