I have div
elements next to each other with display: table-cell;
.
I want to set margin
between them, but margin: 5px
has no effect. Why?
My code:
<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>
You can use inner divs to set the margin.
<div style="display: table-cell;">
<div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
<div style="margin:5px;background-color: green;">1</div>
</div>
If you have div next each other like this
<div id="1" style="float:left; margin-right:5px">
</div>
<div id="2" style="float:left">
</div>
This should work!
Table cells don't respect margin, but you could use transparent borders instead:
div {
display: table-cell;
border: 5px solid transparent;
}
Note: you can't use percentages here... :(
Source: Stackoverflow.com