Recently wrote the project encountered a foreign CSS box model margins (margin) case collapsed, and made me bruised and battered after another online access to a lot of information, is to do a sort out and summarize, to facilitate future access to forget when, at the same time also for the majority of users reference. If wrong or incomplete summary of aspects of the place, the majority of users Huanyin said.
Folding margins concept : the so-called outer margins is folded two or more adjacent elements (the case containing child elements) will merge into a distance from an outer edge in the vertical direction.
Foreign CSS box model margins (margin) common scenario has the following two kinds of folded:
1. adjacent siblings no child elements
Folding margin triggering condition: not triggered when folded margins spaced between two non-empty elements of other elements.
Description circumstances:
1) If the two elements are positive margin, the margin between the two elements = max (margin1, margin2);
Brief Description:
2) As a negative margin of two elements, the margin = min between the two (margin1, magin2), shown in Figure 2;
Brief Description:
3) If there are two elements margin is positive, a negative, the margin between the two = margin1 + margin2, margin = -50px + 25px = -25px shown in FIG III;
Case 2, the occurrence of the sub-elements parent element is folded from the outside
Trigger: parent element without external border (border), no padding (padding), and nothing but air between the elements when the text information or text information is nothing more than an empty element (child element of the parent element and the upper element and the upper sub-elements between the parent , there may be a non-empty elements and text information) between the lower sub-element of the parent element and the lower side, or the lowermost edge of the uppermost folded edge of the parent element of the baseline.
Description circumstances:
1) If the margin value of the parent element and the child elements are positive, the folded margin = max (margin1, margin2), shown in Figure IV.
BRIEF DESCRIPTION OF:
2) If the margin value of the parent element and the child elements are negative, the folded margin = min (margin1, margin2), figure 5.
3) If the margin where a parent element and the child element has a positive, a negative, the folded margin = minmargin1 + margin2, shown in figure VI.
