Reasons and solutions for firefox margin-top failure_Experience exchange

Why translate this description? Someone has translated css2, but after looking at it, it’s very rough (I’m not saying that I’m the only one, the translator is really admirable!). Recently, I’ve come into more and more contact with css and xhtml, but the The more there are, the more confusion there is.
Now I feel that many problems cannot be called problems at all. The reason lies in our hasty understanding. For example, killing a chicken with a bull's knife is not impossible, but unreasonable and inappropriate. If the root cause is wrong, the appearance will be wrong. , if you start to solve the problem from the appearance, it is inevitable that you will always be confused. As I said, you must be down-to-earth and don't be impetuous.
In this description, "collapsing margins" means: adjacent margin attributes between 2 or more box models (the relationship can be adjacent or nested) (there cannot be non- Empty content, padding area, border or using clear separation method) are combined and represented as a single margin.
In CSS2.1, horizontal margins will not be collapsed.
Vertical margins may be collapsed in some box models:
1. In regular document flow, adjacent vertical margins of 2 or more block-level box models will be collapsed.
The final margin value calculation method is as follows:
a. If all are positive values, take the largest one;
b. If not all are positive values, take the absolute value, and then subtract the maximum value from the positive value. ;
c. If there is no positive value, take the absolute value, and then subtract the maximum value from 0.
Note: Adjacent box models may be generated dynamically from DOM elements and have no adjacent or inheritance relationship.
2. In adjacent models, if one of them is floated, the vertical margin will not be collapsed, even between a floating box model and its child elements.
3. The margin between the element with the overflow attribute set and its child elements will not be folded (except when the overflow value is visible).
4. For a box model with absolute positioning (position:absolute) set, the vertical margin will not be collapsed, even with their child elements.
5. For elements with display:inline-block set, the vertical margin will not be collapsed, even with their child elements.
6. If the upper and lower margins of a box model are adjacent, its margin may collapse through it. In this case, the element's position depends on whether the margins of its adjacent elements are collapsed.
a. If the margin of an element and the margin-top of its parent element are collapsed together, the border definition of the border-top of the box model is the same as that of its parent element.
b. In addition, the parent element of any element does not participate in the folding of margin, or only the margin-bottom of the parent element participates in the calculation. If the element's border-top is non-zero, then the element's border-top position is the same as before.
The margin-top of an element that has a clear operation applied will never collapse with the margin-bottom of its block-level parent element.
Note that the position of elements that have been covered by the fold has no effect on the position of other elements that have been collapsed; the border-top border position is only necessary when laying out the child elements of these elements.
7. The vertical margin of the root element will not be collapsed.
The margin-bottom of a floating block-level element is always adjacent to the margin-top of the floated next in-flow block-level sibling element (floated next in-flow block-level sibling), unless that sibling element uses a clear operation. .
The margin-top of a floating block-level element is adjacent to the margin-top of its first floated block-level child (floated first in-flow block-level child) (if the element has no border-top, no padding-top, and child elements are not cleared).
If the margin-bottom of a floating block-level element meets the following conditions, then it is adjacent to the margin-bottom of its last floating block-level child element (if the element does not specify padding-bottom or border):
a. Height:auto is specified
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)
If the min of an element -The height attribute is set to 0, then the margins it owns are adjacent, and it has neither border-top and border-bottom, nor padding-top and padding-bottom. Its height attribute can be 0 or auto, It cannot contain an inline box model (line box), and the margins of all its floated child elements (if any) are adjacent.
When the margin owned by an element is collapsed and it uses the clear operation, its margin-top will collapse with the adjacent margin of the immediately following sibling element, but the result is that its margin will not be consistent with its margin. Margin-bottom collapse of block-level parent elements.
The folding operation is based on the values ​​of padding, margin, and border (that is, after the browser parses all these values). The folded margin calculation will overwrite the different margin values ​​that have been used.

Copy code The code is as follows:

//Without adding the br line, the margin-top of id1 in FIREFOX is:20px It will act on d0, so that there is a 20px gap between the top of d0 and the body, and there is no gap between d1 and d0, and it will display normally in IE