MarginTop why the margintop of the parent element is affected

This problem puzzled for a long time, although there is no big obstacle early touch out how to fix it, but always do not understand why, if only IE has a problem I will not care too much, but the problem is all the best browser performance so, so that I can be relieved? Today finally am find out what is going on, incredibly is CSS2.1 Box model specification ... 　　Although very awkward, very awkward rules. The problem is, two-tier div structure,Outer div attribute "margin:0 Auto", should be close to the top of the box, if there is no Inner div, or no Inner div "Margin-top" attribute, Everything as expected. But when the Inner Div is set to "margin-top:10px", its parent element Outer Div is also supported by a "margin-top:10px" effect.

This "problem" ... It is the CSS2.1 box model that specifies the content--collapsing margins:

in this specification, the expression collapsing margins means that adjoining margins (no Non-empty conte NT, padding or border areas or clearance separate them) of one or more boxes (which May is next to one another or nested) Combine to form a single margin. The margin of all adjacent two or more box elements will be merged into a margin share. Adjacent definitions are: sibling or nested box elements, and there is no non-empty content, padding, or border separation between them.

That's the reason. "Nested" box elements are also "adjacent", also collapsing Margins. This merge margin is very common, that is, the article paragraph element <p/>, and a lot of times, each has a 1em margin, but the adjacent <p/> will only show 1em intervals instead of the added 2em. 　　This is a good understanding, I just wonder why the big-picture is to let nested elements also share the margin, can not think out under what circumstances need such a performance. There are many ways to avoid this problem, as long as it destroys the condition it appears in. Add Padding/border to the Outer Div , or set the Outer div/inner div to Float/position:absolute (CSS2.1 specify floating elements and absolute positioning elements 　　Do not participate in margin folding). More information, about the different values of the margin folded after the performance of the calculation method, etc., you can consult the CSS2.1 specification: collapsing margins.

(go) Why margintop affects the margintop of the parent element