Why does css sub-element margin-top affect the parent element? cssmargin-top

Why does css sub-element margin-top affect the parent element? cssmargin-top

 

For details, click

 

This problem has been confusing for a long time. Although there is no major problem, I have come to know how to solve it, but I still don't know what the cause is. If there is a problem with IE, I don't care too much, but the problem is that all the top-level browsers are doing this. How can I feel at ease? Today, I finally found out what's going on. It's actually the CSS2.1 box model specification ...... Although it is awkward, It is very awkward. For example, the two-layer Div structure,Outer DivThe property is "margin: 0 auto", which should be close to the top of the outer box. If there is noInner Div, Or there is no "margin-top" attribute of Inner Div. Everything is as expected. However, whenInner DivAfter "margin-top: 10px" is set, its parent ElementOuter DivIt is also supported with a "margin-top: 10px" effect that shouldn't have existed.

Inner Div [margin-top: 10px]

Outer Div [margin: 0 auto]

HTML Demo Area

This "problem "...... It is the content specified in the Box Model of CSS2.1-Collapsing margins:

In this specification, the expressionCollapsing marginsMeans 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. all the adjacent two or more boxes of elements of the margin will be merged into a margin share. Adjacent Elements are defined as the same level or nested box elements, and they are separated by no non-empty content, Padding, or Border.

This is the reason. The nested box elements are also "adjacent" and Collapsing Margins. In fact, this merge of Margin is very common, that is, the article section elements <p/>. When there are many parallel items, each of them has a margin of up to 1 em, however, only the 1em interval is displayed between adjacent <p/>, instead of the 2em. This is easy to understand. I am wondering why W3C wants to share the nested elements with Margin and cannot figure out under what circumstances such performance is needed. There are many ways to avoid this problem, as long as it breaks the conditions it appears. ToOuter DivAdd padding/border orOuter Div/Inner DivSet to float/position: absolute (CSS2.1 specifies that floating and absolute positioning elements do not participate in Margin folding ). For more information, see the W3C CSS2.1 standard: Collapsing margins for the calculation method of margin folding with different values.

There are many solutions:

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

2. Use padding instead of margin

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

 

For more html5 content, click