Why Doesn't Margin Work on CSS Table Cells, and How Can I Add Spacing Instead?

Margins on Table Cells

In CSS, when you set an element's display property to table-cell, you're creating a table-like structure. However, table cells are not affected by the margin property. The margin property sets the space outside of the element's borders, but table cells don't have borders by default.

Cause

According to the MDN Documentation, the margin property applies to all elements except elements with table display types other than table-caption, table, and inline-table. Therefore, since table-cell is not one of the exempted table display types, the margin property is not applicable to it.

Solution

To achieve the desired spacing between table cells, use the border-spacing property instead. The border-spacing property sets the space between the borders of adjacent table cells. It should be applied to a parent element with a display:table layout and border-collapse:separate.

<br>HTML:<br><div>
<pre class="brush:php;toolbar:false"><div><p></p></div><p>CSS:<br>.table {</p><pre class="brush:php;toolbar:false">display: table;
border-collapse: separate;
border-spacing: 5px;

}
.row {

display: table-row;

}
.cell {

display: table-cell;
padding: 5px;
border: 1px solid black;

}

Note that border-spacing accepts two values to set different margins for horizontal and vertical axes, if desired.