Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people have no idea about how to analyze the outer margin folding Collapsing margins. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Outer margin folding is an important concept that belongs to the part of box model. At the beginning of contact with CSS, there is only one sentence in the understanding of outer margin folding: the two adjacent outer margins (margin) in the vertical direction will be merged into one, and the final size is the larger of the two.

It is not clear what outer margin folding is, and what other circumstances will happen. Later, in the practical application, it is found that the outer margin folding is not so simple, which contains many other folding rules.

I. concept

Collapsing margin refers to the combination of two or more adjacent outer margins (margin) into one outer margin, that is, outer margin folding. The margin adjacency can be summed up in the following two points:

1. These two or more outer margins are not separated by non-empty content, padding, border, or clear.

two。 These margin are in the normal stream (in-flow, non-floating element, non-positioning element).

II. Rules for margin folding

1. Margin in the vertical direction of block elements in two or more adjacent ordinary streams collapses

a. Two or more

It shows that the number must be greater than one, and that folding is the mutual behavior between elements, there is no An and B folding, B and A do not fold.

b. Adjoining

It means that it is not separated by non-empty content, padding, border, or clear, indicating its location relationship. Note that without being separated, an element margin-top will be adjacent to the margin-top of * child elements (non-floating elements, etc.) in its normal stream; only if the height of an element is "auto" will its margin-bottom be adjacent to the margin-bottom of * a child element (non-floating element, etc.) in its normal stream. The article is not enough, let's put together some examples:

HTML code B

Screenshot:

In the above test case, margin will stretch out the inclusion block of B.

If the value of an element's height property is not auto, its margin-bottom is not adjacent to the margin-bottom of its child elements, so collapse does not occur. Margin-top does not have this limitation, so it is 100px Magi Edge Melbottom without folding, so there is only 50px.

c. Vertical direction

Refers to the specific orientation, only the vertical direction of the margin will fold, that is, the horizontal direction of the margin will not fold the phenomenon.

d. Calculation of folded margin

The margin participating in folding is all positive. Example:

HTML codeA B

Screenshot:

It can be seen that when the margin is positive, the higher value of margin will be taken as the final margin value.

There are positive and negative values in the margin participating in folding. What if there are positive values and negative values in the adjacent margin? There are positive and negative, first take out the absolute value of negative margin * *, and then add the magin of positive marin value * *. Take a look at the following example:

HTML codeA B

Screenshot:

In the above example, the final margin is 100 + (- 50) = 50px.

The margin that participates in folding is all negative. * what if the two adjacent margin are both negative? When the margin is negative, the absolute value is larger, and then, from the zero position, the negative displacement. Look at the example:

HTML codeA B

Screenshot:

The neighboring margin should participate in the calculation together, not step by step. The above examples are all vertically adjacent sibling nodes. Note that adjacent elements do not have to be sibling nodes, and parent-child nodes can also be adjacent, even if they are not sibling nodes. To take a more complicated example, what we want to calculate is what the margin between An and B should eventually be:

HTML code A B

Someone might say, calculate the margin between An and B, calculate the folding of An and its parent element, and then fold with the parent element of its parent element, this value should be 90px. According to this method, the value of B is 80px; then, An and B are folded and margin is 90px.

Isn't that right? Wrong, big wrong. What's wrong with it? Please note that multiple margin are folded into a margin adjacent to each other, so when calculating, all relevant values should be taken instead of being calculated step by step. In the above example, the margin resulting from the margin folding between An and B is the result of six adjacent margin folds. They are:

Positive value of ◆: 50px 150px 200px

Negative value of ◆:-60px meme 100px mileus 120px

According to the calculation rules of positive and negative values, the * value of positive values is 200px, and the absolute value of negative values is-120px. Therefore, the final folded margin should be 200 + (- 120) = 80px.

You can open a browser to verify your conjecture.

two。 Floating element / element of inline-block / margin of absolute positioning element does not collapse with margin of other elements in the vertical direction

The margin of a floating element also does not margin collapse vertically, not even its adjacent child elements. Look at the example:

HTML codeA B

Screenshot:

It can be seen that there is a 100px distance between the two green blocks, and if margin folding occurs between B and its floating containing block, the gold bar should be at the top of the green block, obviously, no folding occurs.

Replace float:leftt with "display:inline-block" and "position:absolute" respectively, and the screenshot is the same as above.

3. An element with block-level formatted content is created without margin folding with its child elements

For block-level formatting content, refer to: http://www.w3.org/TR/CSS2/visuren.html#block-formatting, where floating elements, absolute positioning elements, and elements whose overflow value is not 'visible', all match. Take the element of "overflow:hidden" as an example:

HTML code B

Screenshot:

If there is margin folding of B and its "overflow:hidden" containing block, the gold bar should be at the top of the green block, obviously, no folding occurs.

4. The element's own margin-bottom and margin-top also collapse when they are adjacent to each other.

Its own margin-bottom is adjacent to margin-top, but its content is empty, and its border and padding are 0 vertically. Example:

HTML code

Screenshot:

After the above code runs, what we get is a square, indicating that the final margin is 100px, not 150px, which means that margin folding occurs.

After reading the above, have you mastered how to analyze the outer margin folding Collapsing margins? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.