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

Today, I will talk to you about how to solve the problem of margin folding. Many people may not know much about it. In order to let you know more, Xiaobian summarized the following contents for you. I hope you can gain something according to this article.

A few days ago, there was an electric plane asking this question, and we should make up for the gap in this respect. The following information was collected online:

The problem with margin folding is not bugs, but normal rules.

In CSS 2.1, horizontal margins are not folded.

Vertical margins may be folded in some box models:

In regular document streams, adjacent vertical margins of two or more block-level box models are collapsed.

The final margin value is calculated as follows:

A, all positive, take the largest;

b, not all positive values, then take absolute values, and then subtract the maximum value with positive values;

c. If there is no positive value, take the absolute value and subtract the maximum value from 0.

Note: Adjacent box models may be dynamically generated by DOM elements and have no adjacency or inheritance relationship.

In adjacent box models, if one of them is floating, the vertical margin will not be collapsed, even between a floating box model and its children.

The margin between an element with the overflow attribute set and its child elements will not be collapsed (except when overflow is visible).

4. Box models with absolute positioning (position:absolute) are set, and vertical margins are not folded, even between their child elements.

For elements with display:inline-block set, vertical margins are not collapsed, even with their children.

If the top and bottom margins of a box model are adjacent, then its margins may collapse through it. In this case, the position of an element depends on whether the margins of its neighbors are collapsed.

If an element's margin and its parent's margin-top are collapsed together, the box model border-top boundary definition is the same as its parent.

In addition, the parent element of any element does not participate in the margin folding, or only the margin-bottom of the parent element is involved in the calculation. If the border-top of an element is non-zero, then the border-top boundary of the element is located at the same position as before.

The margin-top of an element to which a purge operation is applied never collapses with the margin-bottom of its block-level parent.

Note that the position of elements that have been collapsed has no effect on the position of other elements that have been collapsed; the border-top boundary position is necessary only when positioning children of these elements.

The vertical margin of the root element is not collapsed.

The margin-bottom of a floating block-level element is always adjacent to the margin-top of its floating next in-flow block-level sibling, unless that sibling uses a purge operation.

The margin-top of a floating block-level element is adjacent to the margin-top of its floating first in-flow block-level child (if the element has no border-top, no padding-top, and the child does not use a purge operation).

A floating block-level element's margin-bottom is adjacent to the margin-bottom of its last block-level child element (if the element does not specify padding-bottom or border) if: a. height specified:auto b. min-height less than the element's actual height c. max-height greater than the element's actual height

If an element's min-height attribute is set to 0, then it has margins that are contiguous, and it has neither border-top nor border-bottom, nor padding-top nor padding-bottom, its height attribute can be 0 or auto, it cannot contain an inline box model, and all of its floating children (if any) have margins that are contiguous.

When an element has a margin collapsed, and it uses a purge operation, its margin-top collapses with the adjacent margin of its sibling, but as a result its margin will not collapse with the margin-bottom of its block-level parent.

Collapse operations are based on the values of padding, margin, and border (i.e., after the browser parses all of these values), and the collapsed margin calculation overrides the values of the different margins that have been used.

After reading the above, do you have any further understanding of how to solve the problem of margin folding? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

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.