CSS margin Merge (collapse) problem.

CSS margin Merge

The top and bottom margins of a block-level element are sometimes merged (or collapsed) into an outer margin, which is the largest of its size, which is called margin folding (margin collapsing) and is sometimes translated as margin merge . Note that the margins of floating and absolutely positioned elements are not collapsed.

The following is a list of three basic scenarios where margin folding occurs:

Between adjacent elements

the margin between adjacent two elements collapses (unless the latter element needs to be cleared before the float).

Between a parent element and its first or last child element

If there is no border, padding, inline content between the parent element and its first child element, the block formatting context is not created, or the float is cleared apart, or there margin-top is no border, padding, inline content, or height min-height The 6/> separates the margin-bottom two, and the pair of margins will have a folding. The outer margin of the child element is then "overflowed" to the outside of the parent element.

Empty block-level elements

if a block-level element contains no content, and margin-top margin-bottom there is no border, padding, inline content, or both, the upper and height min-height lower margins of the element are collapsed.

Some areas to note:

• A combination of these conditions results in more complex margin folding.
• Even if a margin is 0, these rules still apply. So even if the margin of the parent element is 0, the margin of the first or last child element will still "overflow" to the outside of the parent element.
• If the margin that participates in the collapse contains negative values, the value of the collapsed margin is the sum of the largest positive margin and the smallest negative margin (that is, the absolute maximum negative margin).
• If all the margins that participate in the collapse are negative, the value of the folded margin is the lowest value of the negative margin. This rule applies to adjacent elements and nested elements.

ExampleHTML:

1 <P>The bottom margin of this paragraph is collapsed ...</P>2 <P>... with the top margin of this paragraph, yielding a margin of<Code>1.2rem</Code>In between.</P>3 4 <Div>This parent element contains the paragraphs!5   <P>This paragraph has a<Code>.4rem</Code>Margin between it and the text above.</P>6   <P>My bottom margin collapses with my parent, yielding a bottom margin of<Code>2rem</Code>.</P>7 </Div>8 9 <P>I am<Code>2rem</Code>Below the element above.</P>

CSS:

1 Div {2  margin:2rem 0; 3   Background:lavender; 4 }56p {7  margin:. 4rem 0 1.2rem 0; 8   Background:yellow; 9 }

Results:

CSS margin Merge (collapse) problem.