Question

This is probably a simple question but why in the following does the paragraph tag (including margin) not stay within its containing div?

<div class="blockone"></div>
<div>
    <p>some text</p>
</div>

.blockone {
    background-color:Red;
    height:100px;
    margin:50px 0px;
}
div p {
    margin:50px 0px;
}

Have put the example in jsfiddle

http://jsfiddle.net/dr6kN/7/

What I would expect would be that the text and block were 100px apart? I know I get this behaviour by floating, and can bodge to make work but am seeking a bit of understanding 🙂

Answer 1

I’m not sure what you’re referring to as the “containing div”, because the p is in the second div (the bottom, transparent one), so it technically is in its containing div.

What I would expect would be that the text and block were 100px apart?

Due to collapsing margins, the p‘s margin collapses into the red div‘s margin, so only the red div‘s 50-pixel margin takes apparent effect.