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.
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.
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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
CSS:
.table {
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.
The above is the detailed content of Why Doesn't Margin Work on CSS Table Cells, and How Can I Add Spacing Instead?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
