CSS margin issues

CSS margin issues when the container does not have a border

by Rupam Datta

HTML

<div class="root-node">
    <div class="container-node">
        <div class="content-node">
            CSS margin issues when the container does not have a border
        </div>
    </div>
</div>


<div class="root-node">
    <div class="container-node border">
        <div class="content-node">
            CSS margin issues when the container does not have a border
        </div>
    </div>
</div>

CSS

.root-node {
    border: 1px solid #bababb;
    background: #ff0;
    margin: 10px 0;
}
.container-node {
    margin: 10px;
    background-color: #0f0;
}

.content-node {
    margin: 20px;
    background-color: #f00;
    padding: 5px;
    color:#fff;
}

.border {
    border:1px solid #00f;   
}