CSS margin issues when the container does not have a border
css, html
Solution
http://www.w3.org/TR/CSS2/box.html Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
- no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
Problem
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix. Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle. ``` .container-node { margin: 10px; background-color: #0f0; } .content-node { margin: 20px; background-color: #f00; padding: 5px; color:#fff; } .border { border:1px solid #00f; } ``` The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border. I appreciate any help or documentation on this. Thanks