March 5, 2012
Nested Divs Spacing
Question by user596075
I have a parent div and two nested divs. I have the nested divs set as display: table-cell. How can you set spacing between those nested divs? I’ve tried margin, but that didn’t do anything (the jsFiddle has margin set, yet with no effect).
Answer by sandeep
Give display: inline-table; instead of display: table-cell. Write like this
.child {
width: 100px;
height: 100px;
display: inline-table;
margin-left: 100px;
}
Check this http://jsfiddle.net/cZptA/9/
Answer by Starx
It is possible and very simple
Since you have specified the child divs to behave as table-cell, by default they will be no spacing between them just like a regular table. So, there is nothing wrong with you code.
If you really want your divs to behave as tables. Your parent div should have border-spacing for the spacing between the table-cells.
.parent {
width: 400px;
height: 400px;
background-color: red;
border-spacing: 10px;
}
