Css--margin non-overlapping situations

margin overlap

Excerpt from the css2.1 specification Chinese version

In CSS, adjacent margin of two or more boxes (possibly but not necessarily brothers) is combined into a margin. Margin is called overlapping in this way (collapse)
, the resulting union margin is called the overlapping margin.

Calculation rules for margin overlap

Excerpt from the css2.1 specification Chinese version

When two or more margin merges, the resulting margin width is the maximum value in the consolidated margin width. As for negative margin, the maximum value of the absolute value of the negative adjacent margin is subtracted from the maximum of the positive adjacent margin. If there is no positive margin, subtract the maximum of the absolute value of the adjacent margin with 0

What is the adjacent margin

Excerpt from the css2.1 specification Chinese version
Two margin is adjacent, if and only if:

• belong to the Stream block-level box, in the same block formatting context.
• No box (line box), no voids, no padding and no border to separate them (note, therefore some 0 height box)
• All belong to the vertical adjacent box edge (vertically-adjacent box edges), which is from one of the following pairs:
  1. Top margin of a box and its first stream the top margin of a child
  2. The bottom margin of a box and the top margin of the sibling (its next in-flow following sibling) in the next stream
  3. Bottom margin and its parent's bottom margin in the last stream, if the parent's height is calculated as ' auto '
  4. Top and bottom margin of a box, the box does not establish a new block formatting context and the computed value of Min-height is 0,height calculated value is 0 or ' auto ', and there is no stream child

If any part of a margin is adjacent to another margin, it is considered to be adjacent to that margin, which is a merge (collapsed) margin.

Specific analysis of each condition 1. All belong to the stream block-level box, in the same block formatting context.

What is an in-flow element? If an element is floating, absolutely positioned, or is a root element, then it is an out-of-flow element. If an element is not out of the flow, it is called an in-stream element.
The Block-level box inside the stream is a box generated by the block-level elements in the stream.

Conclusion 1: The box margin of the root element does not overlap (cause: Although the root element is a block-level box, it is not a flow-inside element).

Give me a name. : The root element does not overlap with the body's margin

html {margin-top:10px;} body {margin-top:10px;}

Fact: The body is 20px from the top of the viewport.

Conclusion 2: Any floating, absolutely positioned box will not be merged with the margin of any other box (cause: They are flow block-level boxes).

Give me a name. : Two absolutely positioned boxes, no margin overlap occurs.

<Style>    . div1 {Width100px;Height100px;Position:absolute;background:red;Margin-bottom:10px;Top0; }. div2 {width: 100px; height: 100px; position:absolute; background:yellow; margin-top: 10px; top: 100px;} </style> < div class= "Div1" > </div>< Div class= "div2" ></DIV>              

In the browser a look, gee, two div spacing is just 10px, this is not the occurrence of margin overlap it? No,no,no. If you change the margin value of one div at this point, it will not affect the layout of any div. In layman's terms, the absolute positioning box is likened to a flying box, so the two flying boxes must be at different heights, so no matter how the box moves, it will not affect any of the flying boxes.

What is the formatting context? A box in a regular stream belongs to a formatting context, which may be block or inline, but not all (both blocks and inline). Block-level boxes participate in block formatting contexts. Inline-level boxes participate in inline formatting contexts.

New block-level formatting context (BFC) conditions:

• Floating element, float except for the value other than none.
• Absolute positioning element, position (absolute,fixed)
• Display is the value of one of the following inline-blocks,table-cells,table-captions
• Overflow values other than visible (Hidden,auto,scroll)
• Note: "display:table" itself does not produce BFC, but it generates an anonymous box, and the box containing "Display:table-cell" in the anonymous box produces BFC.

In a block formatting context, the box is placed one after the other in the vertical direction, starting at the top of the containing block. The vertical distance between two sibling boxes is determined by the margin attribute. The vertical margin between adjacent block-level boxes in the same block formatting context is merged.

Conclusion 3: The margin of an element that establishes a new block-level formatting context is not merged with their in-stream subset. (Reason: Not in the same block-level formatting context)

Give me a name. : Overflow is not a ' visible ' element and will not be merged with its own stream.

.father {width: 100px; height: 100px; background:red; margin-top: 10px;} .child {width: 50px; Span class= "Hljs-attribute" >height: 50px; background:yellow; margin-top: 20px;} <div class= "father" > < div class= "child" ></DIV></DIV>   

In this case, Father's overflow is ' visible ', a margin overlap occurs, and the father is shifted downward by 20px, as shown.

Overflow is not a ' visible ' element and will not be merged with its own stream of children

If you change the value of the father overflow to a value other than ' visible ', the margin overlap will not occur, as shown in.

The overflow is not a ' visible ' element and will not be merged with its child of the stream 2. No Line box, no gaps, no padding and no border to separate them.

This means that if there is something between the two margin, they are not next to each other, then there will be no margin overlap.

Give me a name. : The parent element has border, and the parent-child element does not occur margin overlap.

  <Style> . father{Width100px;Height100px;background:red;margin-top: 10px;} .child {width: 100px; Span class= "Hljs-attribute" >height: 50px; background:yellow; margin-top: 20px;} </style>< div class= "father" > <div class= "Child" ></div></DIV>              

In this case, the parent-child element margin is not separated. As a result, margin overlaps. ：

Parent element has border, no margin overlap occurs for parent-child elements

If you add a 1-pixel border to the top of the parent element, the parent-child element margin is separated by a border and no margin overlap occurs. ：

Parent element has border, no margin overlap occurs for parent-child elements

At this point the child is 20px from the top of father;

For example: The margin itself of an empty div overlaps

  <Style>    . div1 {Width100px;margin-top: 100px; margin-bottom: 100px;} .div2 {width: 100px; Span class= "Hljs-attribute" >height: 100px; background:red;} </style>< div class= "Div1" > </div>< Div class= "div2" ></DIV>              

If the upper and lower margin of an empty div is not separated, overlapping occurs:

The margin of an empty div overlaps itself

The red Div deviates from 100px, not 200px, because the empty div has margin overlap. If you add padding-top=10px to an empty div, there will be no margin overlap:

The margin of an empty div overlaps itself

The Red Div is now shifted downward by 210px (100+100+10).

3. The last stream is the bottom margin of the child and its parent's bottom margin, if the parent's height is calculated as ' auto '.

  <Style>    . Father {Width100px;Margin-bottom:100px; }. Child {Width100px;Height100px;Margin-bottom:150px;background:red; }. sibling {width: 100px; height: 100px; background:yellow;} </style>< div class= "father" > <div class= "Child" ></div></div><div class= "sibling" ></DIV>    

At this point the height of the Father element is Auto,father Margin-bottom with the child's margin-bottom, overlapping, therefore, sibling distance father150px;
：

The last stream is a child of the bottom margin and its parent's bottom margin, if the parent's height is calculated as ' auto '.

If you set height:100px for father at this point, then Father Margin-bottom will not overlap with the margin-bottom of the child. At this point the vertical distance between the sibling and the father is only related to their margin value, regardless of the margin value of the child. ：

The last stream is a child of the bottom margin and its parent's bottom margin, if the parent's height is calculated as ' auto '. 4. Top and bottom margin of a box, the box does not establish a new block formatting context and the computed value of Min-height is 0,height calculated as 0 or ' auto ', and there is no stream child.

   <Style>    . div1 {Width100px;margin-top: 100px; margin-bottom: 100px;} .div2 {width: 100px; Span class= "Hljs-attribute" >height: 100px; background:red;} </style>< div class= "Div1" > </div>< Div class= "div2" ></DIV>              

In this case, DIV1 does not establish a new format context and Height:auto, nor is it a child of the stream. Div1 itself div overlap, div2 cheap 100px. ：

A box of top and bottom margin, the box does not establish a new block formatting context and the computed value of the min-height is 0,height calculated as 0 or ' auto ', and there is no stream child.

If you set the overflow of DIV1 to a value that is not visible, or add a stream of child <span>1</span> (cannot be an empty label, the margin still overlaps), or add a height value. At this point, the margin does not overlap. This will not be affixed to the picture.

Summarize

After analyzing the conditions of margin overlap, we get the situation that the margin does not overlap.
My summary is: As long as two margin is separated, it will certainly not happen margin overlap. Can be up and down border separated, can be separated by the upper and lower padding, can also be separated by height, can be separated by the flow of the child, can be separated by the gap (the production of voids and clear), can be separated by the newly established format context.
The following is a summary of the css2.1 specification

• A margin between a floating box and any other box will not be merged (even between a floating box and its stream)
• The margin of a new block formatting context (for example, a floating box with a overflow element that is not ' visible ') will not be merged with the child of their stream
• The margin of the absolutely positioned box will not be merged (even with their stream of the child)
• The margin of the inline box does not merge (even with their own stream of the child)
• The bottom margin of a block-level element in a stream is always merged with the top margin of the block-level sibling in its next stream, unless there is a gap between the brothers
• The top margin of a block-level element in a stream is merged with the top margin of the block-level child in its first stream, if the element does not have a top border, there is no top padding and the child has no gaps
• A ' height ' is ' auto ' and ' Min-height ' is 0 of the flow inside the block-level box bottom margin is merged with the bottom margin of the block-level child in its last stream, if the box does not have bottom Padding and no bottom border and the child's bottom margin does not merge with the top margin with voids
• The box's own margin will also be merged if the ' Min-height ' attribute is 0 and neither top nor bottom border nor top or bottom padding, and its ' height ' is 0 or ' auto ', and does not contain a row box, and the margin (if any) of all its streams is merged.
  If the top of the box is adjacent to the bottom margin, it may be completely merged (collapse through)
  Margin At this point, the position of the element depends on the relationship of the element that is merged with the other margin
  If the margin of the element is merged with the top margin of its parent, the top border edge of the box is defined as the same as its parent
  Otherwise, either the parent of the element does not participate in the margin merge, or only the bottom margin of its parent is involved. If the element's bottom border is not 0, the position of its top border side will be displayed normally (the same as it would has been).
  Note that the position of the element that has been completely merged does not affect the position of other margin elements that are merged, only the position of the top border edge is required when the descendants of these elements are laid out.

You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!

Css--margin non-overlapping situations