Problem Description:
A parent contains a box that contains a child element. A vertical margin margin-top to the child elements of the normal flow causes the parent element to follow down, while the margins of the child and parent elements are not changed.
HTML structure:
<div class= "Box1" ><div class= "Box1_1" ></div></div>
CSS style:
. Box1{height:400px;background: #fad;}
. Box1_1{height:100px;margin-top:50px;background: #ade;}
Workaround:
1. Modify the height of the parent element, add padding-top style simulation (commonly used);
2. Add Overflow:hidden to the parent element; style (perfect);
5. Declare a float (available) for the parent element or child element;
3. Add border (available) for the parent element;
4. Add extra elements at the front of the child element, set the height to 1px,overflow:hidden (if the element is inline, declare it as a block element) (verbose);
6. Declare absolute positioning (...) for the parent element or child element. ）。
principleA box without the padding (padding-top) and top border (border-top), the top margin of the box overlaps with the top margin of the first child in its internal document flow. 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. To give
Outer DivAdd Padding/border, or give
Outer Div/inner DivSet to Float/position:absolute (CSS2.1 specifies that floating elements and absolute positioning elements do not participate in margin folding). In Ie/win if the box has layout then this phenomenon will not happen: it seems that owning layout will prevent the child's margin from sticking out of the containment container. Also, when haslayout = True, there is a problem with margin calculation errors, whether it contains a container or a child element. Haslayout Details Click >>
Reprinted from: Network
Child element Margin-top property passed to the parent element of the problem go!
