Elaborate CSS margin

Https://coding.net/u/zhengkenghong
Original: Https://blog.coding.net/blog/css-margin

Elaborate CSS margin

This article focuses on the "pit" of margin, which we are less likely to find everyday.

Box model

People who have been exposed to CSS should know the box model of CSS:

The Content box (contents box) is surrounded by the contents edge, and the Padding box, the Border box (Border box), the margin box, and so on.
The background of the contents box, the Inner margin box and the border box background is determined by the attribute, while the background of the outer box is transparent.

CSS Margin Property

There are a few things that might not match our intuition about the margin attribute:

• If the value of margin is a percentage, it is calculated relative to the Content box width of the parent element, even Margin-top and Margin-bottom. Therefore, even if the parent element's aspect are not equal, the margin element of the child element specifies the same percent value, and the margin computed value for each direction of the child element is equal.
• The Margin-top and Margin-bottom values are not valid for inline non-replacement elements (non-replaced inline Element). So we can specify the Margin-top and Margin-bottom of the IMG element, rather than replacing the inline elements (such as i,span, etc.) and setting margin-top and margin-bottom without effect.

Adjacent margin (adjoining margin)

If the two vertical margin has no other vertical margin between them, but they do not necessarily touch each other, we say that these two margin are vertically contiguous (vertical-adjacent), including the following four cases, to satisfy one of them:

• Top margin of the parent element and top margin of the first child element
• The bottom margin of the parent element and the bottom margin of the last child element
• The bottom margin of the element and the top margin of the sibling element adjacent to this element
• If an element does not generate BFC, does not contain a normal stream of child elements, min-height is 0, height is 0, or auto, its top margin and bottom margin are also vertically contiguous

If two margin satisfies the following three conditions, we will say that the two margin is adjacent (adjoining):

1. The two margin is vertically contiguous, which satisfies one of the four above conditions
2. The two elements of margin are block-level elements of normal flow, and in the same BFC
3. No box (line box) between two margin, clear floating gap (clearance), padding and border

Margin folding (collapsing margins)

Margin is folded, that is, the adjacent margin may be folded into one.

For example, the element #a specifies that Margin-bottom is 10px, and the element below it #b specifies Margin-top as 20px, as in this case:

The margin-bottom of the element #a and the margin-top of the element #b overlap in position, the distance between them is 20px, that is, the bottom margin length of the element #b, which is the margin folding phenomenon. As for this phenomenon, you can understand:

Margin defines the minimum spacing between it and the other boxes. Where the element #a specified Margin-bottom is 10px, it indicates that the element below it #b at least 10px away from it, it specifies a minimum value, so the actual distance can be larger than this.

Element #a below the element #b also set the Margin-top to 20px, if not folded, then they have a distance of 30px. If folded into a 20px distance, then for the element #a, its margin-bottom requires at least 10px distance, is satisfied, and for the element #b, its margin-top requirements at least 20px distance, is also satisfied.

and the existence of margin folding, in fact, in order to be able to visually appear more beautiful, but also closer to the expectations of designers.

Margin folding Rules

Not all of the margin can be folded, and the following conditions need to be met:

• Vertically adjacent margin can be folded, horizontal margin never folds
• The margin of the root element (that is, the HTML element) is never collapsed
• If an element, its top margin and bottom margin are adjacent, and there is a clear floating gap (clearance), the margin of this element can be folded with the margin of the sibling element, but the folded margin cannot be followed by the bot of the parent element Tom margin folds.

It is important to note that margin is not folded only once, and that multiple margin requirements can be folded to form a folded margin (collapsed margin).
And if the folded margin is folded by margin a and so on, if a margin x is adjacent to margin a, then we also think that margin X is adjacent to this folded margin.

Size of margin after folding

When two or more than two margin folds, the value of margin is calculated as follows:

• If margin is a positive number, take the maximum of them
• If there is a positive negative in the margin, then take the largest positive number plus the smallest negative numbers (such as the largest margin is 20px, the smallest margin is -20px, then they calculate the value is 0)
• If the margin is negative, take the minimum value from them

Several study questions

The margin of a floating, positioned element does not overlap with the margin of any other element, including its child elements.

This is because the floating element is out of normal flow, so it and other adjacent elements are not in the same stream, naturally not adjacent, and because the floating element's content box will form a new BFC, so the floating element and the child elements are not in the same BFC, so their margin can not be folded. Positioning elements are similarly available.

The Inline-block element does not collapse with the margin of other elements, including its child elements.

Because margin folding only occurs on block-level elements, the margin of the inline-block element is not folded with the sibling element, and because the Inline-block content box forms a new BFC, the Inline-block element itself does not and the child element's Margin occurs folding

Margin folding of several chestnut chestnuts 1

If two margin satisfies the following three conditions, we will say that the two margin is adjacent (adjoining):

• No box (line box) between two margin, clear floating space (clearance), padding, and border

For this condition, we prevent the folding of margin by adding padding:

If the #container does not have a lower border, the bottom margin of the #container bottom margin is adjacent to the #inner, so they are folded, and the #container element is #inner open, so you can see The height of the #container element becomes 10px and the #inner red background is displayed

When you add a lower border to the #container, the border between the two margin is blocked, they are not adjacent, and therefore cannot be collapsed. So you can see that the #container is open to 20px, where 10px is #inner height, and 10px is the #inner bottom margin, and because margin is transparent, #container exposed a part of the blue Background.

Chestnut 2:

If two margin satisfies the following three conditions, we will say that the two margin is adjacent (adjoining):

• The two elements of margin are block-level elements of normal flow, and in the same BFC

We prevent the folding of margin by creating a new BFC:

As #container element and #inner element belong to a BFC, the top margin of the #container and the top margin of the #inner are folded, bottom margin similarly.
However, if the #container is in a different BFC than the #innter, the top margin and the bottom margin will not collapse, such as:

Add a property to the #container element overflow: hidden , let its content box generate a separate BFC, and #inner in this independent BFC, so #container and #inner are in two different BFC, so their margin does not can be folded.

Chestnut 3:

• If an element, its own top margin and bottom margin are adjacent, and there is a clear floating gap (clearance), the margin of this element can be folded with the margin of the sibling element, but the folded margin cannot be followed by the parent element's B Ottom margin folding.

A gray background is set for the parent element #container, and the height is not set, so the height expands with the content and margin is set to 50px.
There is a red floating element #floated, aspect are set to 40px.
A margin of 15px is set for the #cleared, and the height, padding, and margin of the element are 0, so the top margin and bottom margin of the #cleared element are adjacent. The location of this element is as follows:

Because the #cleared element clears the left float, the #cleared element moves down.
The margin of #cleared elements and #slibling elements is folded, so you can see that their positions overlap.

Due to the existence of this rule, their folded margin cannot be folded with the #container bottom margin, so the height of the #container is open.

Without this rule, they should also be folded with the bottom margin of #container, such as:

The above diagram, after removing the clear property of the #cleared element, does not satisfy this rule, so you can see that the height of the #container is only 40px, that is, the height of the red floating element, and #cleared element, #sibling element, # The margin of the container element is folded into one.

Conclusion

Most of the content of this article is translated from the official norms, but also refer to some of the online writing of a relatively good article and write an introductory article, which some of the content did not unfold, such as BFC, clearance, etc., because this part of the content is not few words can be explained clearly, I also need to have a deeper understanding of learning, so please read the relevant articles by themselves

Reference documents

Https://www.w3.org/TR/CSS2/box.html
Https://www.w3.org/TR/CSS2/visuren.html
Http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
1190000003099116
1190000003096320
Http://melonh.com/css/2015/04/28/understand-margin-collapse.html

Elaborate CSS margin