Home >Web Front-end >CSS Tutorial >Why Doesn't Margin Work on Divs with `display: table-cell;` and How Can I Add Spacing?
Why Doesn't Margin Work on Divs with `display: table-cell;` and How Can I Add Spacing?
- Linda HamiltonOriginal
- 2024-12-06 22:35:12544browse
Margin Property Not Affecting Div with "display: table-cell;"
In HTML, we can encounter a scenario where div elements with "display: table-cell;" lack the expected spacing introduced by the margin property.
Cause
The margin property is incompatible with elements exhibiting display types other than table-caption, table, or inline-table. Regrettably, display: table-cell falls outside of these exceptions.
Solution
To circumvent this limitation, consider utilizing the border-spacing property as an alternative. However, it's crucial to apply border-spacing to a parent element featuring a display: table layout, accompanied by border-collapse: separate.
HTML
<div><pre class="brush:php;toolbar:false"><div>
CSS
.row {display:table-row;}<br>.cell {display:table-cell;padding:5px;border:1px solid black;}<br>
With this setup, you can add spacing between the div elements.
Horizontal and Vertical Margin Variations
Additionally, the border-spacing property allows for independent margin values along the horizontal and vertical axes by specifying two distinct values.
.../border-spacing:3px 5px;} /<em> 3px horizontally, 5px vertically </em>/<br>
The above is the detailed content of Why Doesn't Margin Work on Divs with `display: table-cell;` and How Can I Add Spacing?. For more information, please follow other related articles on the PHP Chinese website!