Reasons and solutions for firefox margin-top failure

Why should we 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 When solving problems starting from the surface, 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 between them) , padding area, border or using clear separation method) are combined and represented as a single margin.
In CSS2.1, horizontal margin 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 they are not all positive values, take the absolute value, and then subtract the maximum value from the positive value;
c. There is no positive value value, then take the absolute value, and then subtract the maximum value from 0.
Note: Adjacent box models may be dynamically generated from DOM elements and have no adjacent or inheritance relationship.
2. In adjacent and model, 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 box models with absolute positioning (position:absolute) set, vertical margins 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 position of the element 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 folded; 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 the 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. 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)
If the min-height attribute of an element is set to 0, then its The owned margins 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, and it cannot contain an inline box model ( line box), the margins of all its floating child elements (if any) are also adjacent.
When the margin owned by an element is collapsed, and it uses the clear operation, its margin-top will be collapsed with the adjacent margin of the immediately following sibling element, but the result is that its margin will not be consistent with its block level The margin-bottom of the parent element is collapsed.
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.

<div id="d0" style="background-color:#333333;height:500px;"> 
<br style="line-height:0;"/> 
//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示 
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div> 
</div>

For more articles related to the causes and solutions of firefox margin-top failure, please pay attention to the PHP Chinese website!