Why does the margin-top of css child elements affect the parent element_html/css_WEB-ITnose

For details, please click

This problem has puzzled me for a long time. Although I figured out how to solve it long ago without any serious problems, I still don’t understand. What's the reason? If it's just IE that has a problem, I wouldn't care too much. But the problem is that all high-end browsers behave like this. How can I feel at ease? Today I finally found out what was going on, and it turned out to be the CSS2.1 box model specification... although it is an awkward, very awkward rule. The problem is as shown below. In the two-layer Div structure, the Outer Div attribute is "margin:0 auto", which should be close to the top of the outer frame. If there is no Inner Div, or there is no Inner Div The "margin-top" attribute works as expected. But when Inner Div sets "margin-top:10px", its parent element Outer Div is also stretched out with a "margin-top:10px" that should not be there. Effect.

Inner Div [margin-top: 10px]

Outer Div [margin: 0 auto]

HTML Demo Area

This "problem"... is it what is specified in the box model of CSS2.1? Collapsing margins:

In this specification, the expression collapsing margins means that adjoining margins (no non -empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. The margins of all adjacent two or more box elements will Merge into one margin and share it. Adjacency is defined as: sibling or nested box elements, and there is no non-empty content, Padding or Border separation between them.

That’s why. "Nested" box elements are also considered "adjacent" and will also have Collapsing Margins. This merged margin is actually very common. It is the article paragraph element

. When there are many parallel elements, each one has a margin of 1em above and below, but only 1em is displayed between adjacent

2em spaced instead of added. This is easy to understand. I just wonder why W3C wants nested elements to share margins. I can’t think of any situation where such behavior is needed. There are many ways to avoid this problem, as long as you destroy the conditions for it to occur. Add padding/border to Outer Div, or set Outer Div / Inner Div to float/position:absolute (CSS2.1 stipulates that floating elements and absolutely positioned elements do not participate in margin folding ). For more information, regarding the calculation method of the collapsed performance of margins with different values, etc., you can refer to the W3C CSS2.1 specification: Collapsing margins.

There are many solutions:

1. Add overflow:hidden or padding, border to the parent;

2. Use padding instead of margin

Source ：http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html

For more html5 content, please click