css - Why does the child div's margin affect the margin of the parent?

Question

Please refer to http://jsfiddle.net/NobleWolf/X6qVv/.

I have three divs that are set to the window height by jquery and they have a bottom margin, they're called '.pannel'. Inside each '.pannel' is a child called '.pContent' that has a top padding.

My question is why does the '.pContent' change the parent's top margin when "padding-top: 3%;" is changed to "margin-top: 3%;"

Thank you!

Answer 1

It's due to collapsing margins - the top margin of a block level element will always collapse with the top-margin of its first in-flow block level child if there is no border, padding, clearance or line boxes separating them. One way you can prevent this behaviour is by changing the display value of each containing div to inline-block:

http://jsfiddle.net/X6qVv/4/

Answer 2

Margin collapse. See references below for some examples on avoiding it.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing http://reference.sitepoint.com/css/collapsingmargins

See fiddle - overflow hidden applied to .pannel http://jsfiddle.net/pTTQQ/

.pannel {
width: 100%;
padding-bottom: 10%;
overflow:hidden;
}
.pContent {
width: 90%;
height: auto;
margin: 0 auto 0 auto;
margin-top: 3%;/* Why can't this be margin top? */
}