I have here two divs:
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
Is there a way to make space between these two divs (that have display:table-cell
)?
You can use border-spacing
property:
HTML:
<div class="table">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
</div>
</div>
CSS:
.table {
display: table;
border-collapse: separate;
border-spacing: 10px;
}
.row { display:table-row; }
.cell {
display:table-cell;
padding:5px;
background-color: gold;
}
Any other option?
Well, not really.
Why?
margin
property is not applicable to display: table-cell
elements.padding
property doesn't create space between edges of the cells.float
property destroys the expected behavior of table-cell
elements which are able to be as tall as their parent element.