Firefox margin-top failure Reasons and solutions _ experience Exchange

Why do you want to translate this note? Css2 Ben has been translated, but look at, very rough (not to say that their own how Ah, translators are really worthy of admiration!) Recently, more and more contact with CSS and XHTML, but the more contacts, the confusion is always missing.
Now I think a lot of problems can not be called the problem, the reason is that our hasty understanding, such as overkill, not can not, is unreasonable, inappropriate, the root cause is wrong, the appearance will be wrong, if solve the problem from the appearance, inevitably always touch the head, or that sentence, to down-to-earth, cut mo impetuous.
In this note, the "Collapsing margins" (folding margin) means: 2 or more box models (relationships can be contiguous or nested) adjacent margin properties (this cannot have non-empty content, padding area, Border border or using the clear Detach method) is represented as a separate margin.
In css2.1, the horizontal margin is not collapsed.
Vertical margin may be folded in some box models:
1. In the regular document flow, the vertical margin adjacent to 2 or more block-level box models is collapsed.
The final margin value is calculated as follows:
A, all are positive, take the largest person;
b, not all positive values, then the absolute value is taken, and then minus the maximum with a positive number;
C, without a positive value, take absolute values and subtract the maximum by 0.
Note: Adjacent box models may be dynamically generated by DOM elements and do not have an adjacent or inheritance relationship.
2. Adjacent and model, if one of them is floating (floated), the vertical margin will not be folded, even between a floating box model and its child elements.
3. The margin between the element that sets the overflow attribute and its child elements is not collapsed (except for the overflow value).
4, set the absolute positioning (position:absolute) of the box model, vertical margin will not be folded, and even between their child elements are the same.
5, set the Display:inline-block elements, the vertical margin will not be folded, and even between their child elements are the same.
6, if a box model of the upper and lower margin adjacent, then its margin may be folded cover (collapse through) it. In this case, the position of the element (position) depends on whether the margin of its neighboring elements is collapsed.
A, if the margin of the element and the margin-top of its parent element are folded together, the bounding definition of the box model Border-top is the same as 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 is involved in the calculation. If the element's border-top is nonzero, then the element's border-top boundary position is the same as the original.
A margin-top of an element that has a purge operation applied will never collapse with the margin-bottom of its block-level parent element.
Note that the position of those elements that have been collapsed has no effect on the position of the other elements that have been collapsed, and the border-top boundary position is required only when the child elements of these elements are laid out.
7. The vertical margin of the root element is not collapsed.
The margin-bottom of a floating block-level element is always adjacent to the sibling of the floating block-level sibling element (floated next In-flow block-level margin-top) behind it, unless the same sibling element uses the purge operation.
The margin-top of the floating block-level element and its first floating-block-level child element (floated-in-flow block-level children) are adjacent to Margin-top (if the element does not have border-top, There is no padding-top, and the child element is not using the purge operation).
Margin-bottom of a floating block-level element if the following conditions are met, 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, designated Height:auto
B, min-height less than the actual use height of the element (height)
C, max-height greater than the actual use height of the element (height)
If the Min-height property of an element is set to 0, the margin it owns is contiguous, and it has neither border-top nor border-bottom, nor padding-top and Padding-bottom, Its Height property can be 0 or auto, it cannot contain an inline box model (line box), and its margin for all floating child elements (if any) is also contiguous.
When the margin owned by an element is collapsed, and it uses a purge operation, its margin-top will collapse with the adjacent margin of the sibling element immediately following it, but the result is that its margin will not be folded with the margin-bottom of its block-level parent element.
The collapse operation is based on the values of padding, margin, border (that is, after the browser resolves all these values), and the collapsed margin calculation overrides the values of the different margin that were used.
Copy CodeThe code is as follows:



Do not join BR this line, in Firefox id1 margin-top:20px will function on the D0, so that the d0 above and the body between 20px spacing, D1 and D0 above no spacing, and ie within normal display

