margin area
Limited by margin boundaries, extend the border area with white space to separate adjacent elements. Its dimensions are margin-box width and margin-box height;
The size of the margin area is controlled by margin-top, margin-right, margin-bottom, margin-left, and the abbreviated attribute margin. Boxes share margins and margin collapse will occur ;
Note: For inline elements, although there are padding and borders around the content, the space occupied (the height of each line of text) is determined by the line-height attribute, even if the borders and padding are still displayed around the content
Collapse of margins
Margin folding actually means literally. Maybe you have not come across this term, but you must have encountered it when coding CSS. You may not have a deep understanding of it, but the margins are different from what is actually expected. For example, the margins of adjacent elements will be different. Influence each other, the margins of child elements will cause the parent element to share the margins of child elements, etc., which is actually margin folding; in the box model, there is a special margin folding analysis;
Note: Margin folding only occurs in the vertical direction, not the horizontal direction.
Three situations of margin folding:
1. Adjacent sibling elements
Margins between adjacent sibling elements will be collapsed (unless subsequent elements need to clear previous floats).
The above three adjacent sibling elements 1, 2, 10px and 50px, have a margin of 50px; elements 2 and 3, have a margin of 10px and 50px, and a margin of 50px.
When the outer margins are all positive values, the margin after folding takes the maximum value;
Brother elements 2 and 3 have positive and negative margins, 10px and -10px, and the outer margin after folding is 0;
There are positive and negative margins, and the value of the folded margin is the sum of the largest positive margin and the smallest (maximum absolute value) negative margin.
Sibling elements 1 and 2 have negative margins, -10px and -50px, and the folded margin is -50px;
The margins are all negative, and the value of the folded margin is the smallest (maximum absolute value) negative margin. This rule applies to adjacent and nested elements.
2. No content separates parent elements from descendant elements
No borders, padding, or inline content are set, and no margin-top is created or gapped to separate the block-level element's margin-top from one or more of its child block-level elements. The top margin (
margin-top);
No border, padding, line-level content, height, or min-height is set to separate the bottom margin of a block-level element from the bottom margin of one or more descendant block elements within it. (margin-bottom), these margins will collapse, and the overlapping portion will eventually overflow outside the parent element.
The child element is not an inline element;
The top margin of the parent element is 100px, which is the margin-top of the child element;
The bottom margin of the parent element is 50px, which is the margin-bottom of the child element;
3. Empty blocks
If the block-level element does not set borders, padding, line-level content, height (height), and minimum height (min-height) to separate the top margin (margin-top) and bottom margin (margin-bottom) of the block-level element ), the top and bottom margins will collapse.
The top and bottom margins of the middle empty block are collapsed, so the top and bottom margins of the third one are 100px
Margin folding
If you don't want the margins to collapse, you have the following options:
1. If these attributes are not set, it will cause the margins to collapse. If they are set, they will not collapse.
.page {
/* padding: 1px 100px; */
/* height: 1px; */
/* min-height: 120px; */
/* border: 1px #fff solid;
}
2. Elements with floating and absolute positioning settings will not have margins collapsed.
3. Margin collapse will not occur in containers display set to flex or grid