Why is a div with "display: table-cell;" not affected by margin?
A display: table-cell;
element ignores margins since it emulates an HTML <td>
element, which takes padding instead. For outer spacing, surround it with a <div>
and stipulate margins to this outer <div>
.
Wrap your cell to define margin. To define space inside a cell, use padding
. table-cell
doesn't allow direct margins.
Explanation: the behavior of "display: table-cell"
Using the parent element for spacing
The display: table-cell;
turns the div into a table cell, similar to an HTML <td>
. It doesn't accept margins because of its nature to tightly pack content. To space out display: table-cell;
elements, use border-spacing
on a parent element with display: table;
.
Create a <div>
for structure:
Creating spacing within the cell
In the tiny universe of a display: table-cell;
element, padding
plays the role of space-maker.
Using transparent borders for a gap
The alternate technique employs transparent borders on the table cells as a workaround, though remember that they cannot be expressed in percentages.
Different spacing for horizontal and vertical axes
Now, if you're planning to use separate horizontal and vertical spacing, border-spacing
accepts two distinct values:
Simulating margins in table-cells
So, you crave a margin-like aura? One way is to place an internal <div>
or <span>
with a certain width to feign an external spacing:
Handling multiple cells in a single row
Apply .row {display: table-row;}
to sort multiple cells into a neat row:
Was this article helpful?