Margin Collpase (margin merger) summary

First, preface

The title of the margin Collpase (margin merger), lakes and rivers into a "margin collapse"; the previous understanding of the margin merger is that the previous margin-bottom in the adjacent sibling element will be merged with the next Margin-top; immediate parent-child element , Margin-top will merge; Then, there will be no then. Until the actual project, see there are existing projects in the existence of parent-child margin does not merge phenomenon, but they do not understand the time, talent Lady seriously will be in the world of the rules of the merger of the margin to see it again.

Second, margin collpase

Margin Collpase rules

1. Root Element does not merge
2. Adjacent (adjoining ) margin merged to maximum value

The root Element in the first article, that is, BFC, do not know what the BFC, and later please see the relevant links below, but this does not affect the understanding of the content below

The condition of the adjacent (adjoing) in the second article: (Three must be satisfied)

1. Block-level elements in the same BFC, and in the document flow
2. There is no inline element (line boxes), padding (padding), border (border) between adjacent margin, if the inline element with height 0 is invalid (empty label <span><span> etc.)
3. Margin is vertically oriented.

Adjacent rules:

1. Top margin of a box and top margin of its first in-flow child (the margin-top of the element and the margin-top of it in the document flow of the second element)
2. Bottom margin of box and top margin of its next in-flow following sibling (element Margin-bottom and it in the document stream behind the margin-top of the sibling element)
3. Bottom margin of a last in-flow children and bottom margin of its parent if the parent has ' auto ' computed height (the final child element in the document flow Margin-bottom and the margin-bottom of its parent element, provided that the parent element's height is auto)
4. Top and bottom margins of a box that does not establish a new block formatting context and so has zero computed ' Min-hei Ght ', zero or ' auto ' computed ' height ', and no in-flow children (BFC and margin-top of non-margin-bottom elements, and the min-height of this element is 0, Height is 0 or auto, and there are no child elements within the document flow)

Margin negative Merge rule:

When both or more margins collapse, the resulting margin width is the maximum of the collapsing margins ' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins are deducted from the Maximum of the positive adjoining margins. If There is no positive margins, the maximum of the absolute values of the adjoining margins was deducted from zero. (Multiple Mar When gin merges, the merge gets the maximum value. If margin is negative, positive margin minus negative value the absolute value of the maximum margin is the final margin, and if there is no positive margin, the result is 0 minus the negative value the maximum margin absolute value)

Third, prevent margin collpase

The margin collpase rule on the top is 2, and there are two effective methods for these two articles:

1. Turn elements into BFC, and see the rules of BFC related content (the Overflow:hidden that you see in the project is the same principle)
2. The adjacent margin is cut off, from the adjacent conditions of three, we can see that the 2nd can still be blocked. Adds a padding,border to an element. If there is no border in the design, the border can be set to transparent (border-color:transparent;)

Technorati Tags: css

Margin Collpase (margin merger) summary