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

In this issue, Xiaobian will bring you about how to deeply analyze the causes and solutions of Firefox margin-top failure. The article is rich in content and analyzes and narrates from a professional perspective. After reading this article, I hope you can gain something.

Focus on Firefox margin-top failure causes and solutions, in this description,"collapsing margins" means: 2 or more box models adjacent margin attributes combined to represent a single margin.

Firefox margin-top failure causes and solutions

Recently found a lot of margin-top to achieve, the upper margin effect has not been, have not known what the reason, today accidentally saw, especially to share with you. In this description,"collapsing margins" means that adjacent margin attributes between two or more box models (relationships can be adjacent or nested)(there can be no non-empty content, padding regions, border borders, or clear separation methods) are combined to represent a single margin.

In CSS 2.1, horizontal margins are not folded.

Vertical margins may be folded in some box models:

1. In regular document flow,

Adjacent vertical margins of 2 or more block-level box models are collapsed.

The final margin value is calculated as follows:

A, all positive, take ***;

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

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

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

In adjacent sum models, vertical margins are not collapsed if one of them is floated, 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 upper and lower 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 only necessary when laying out 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 floatednext-flow block-level sibling element, unless that sibling element uses a purge operation.

The margin-top of a floating block-level element is adjacent to the margin-top of its *** floatedfirstin-flow block-level children (if the element has no border-top, no padding-top, and the children do not use a purge operation).

The margin-bottom of a floating block-level element is adjacent to the margin-bottom of one of its *** floating-level children (if the element does not specify padding-bottom or border) if:

A. Specify height:auto

b, min-height is less than the actual height of the element (height)

c, max-height is greater than the actual height of the element (height)

An element whose min-height attribute is set to 0 has margins adjacent, 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 linebox; and all its floating children (if any) have margins adjacent.

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.

The code is as follows:

//Without adding br line, in Firefox margin-top:20px of id1 will act on d0, so that there is a 20px gap between d0 and body, and there is no gap between d 1 and d0, and IE will display normally. The above is how to deeply analyze the causes and solutions of margin-top failure under Firefox. If there are similar doubts, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

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.