Recognize the standard box model and understand the margin overlay

Overview:

Note: Bold italic word is very important concept, determines whether you can read that sentence, so do not understand please be sure to search for a bit.

Each element on the page is in a rectangular box. Each rectangle is a box model. Each box model consists of a content area (contents), a border (border), an inner fill (padding), and margin (margin). All four properties can exist independently. In other words, a box can only be content, or only border, or only padding, can also be only margin.

(Image from Network)

About margin:

• can have negative values

Negative values for margin properties is allowed, but there could be implementation-specific limits

The function of this feature is strong to be able to write an article alone. So it's enough to stay on the cognitive level first.

• The background is always transparent.
• may become invalid

Margin-top and Margin-bottom has no effect on non-replaced inline elements.

Setting Margin-top and Margin-bottom for an inline-level element (such as a element, span element) that is not affected by an external resource has no effect on the width and height.

• Vertically adjacent margins are collapsed

adjoining vertical margins collapse, except:

• Margins of the root element ' s box does not collapse.
• If the top and bottom margins of an element with clearance is adjoining, its margins collapse with the adjoining margins Of following siblings but this resulting margin does not collapse with the bottom margin of the parent block.

Margins is adjoining if and only if:

• Both belong to in-flow block-level boxes This participate in the same block formatting context.
• No Line boxes, no clearance, no padding and no border separate them.
• Both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  • Top margin of a box and top margin of its first in-flow child
  • Bottom margin of box and top margin of its next in-flow following sibling
  • Bottom margin of a last in-flow child and bottom margin of their parent if the parent has ' auto ' computed height
  • Top and bottom margins of a box that does not establish a new block formatting context and so has zero computed ' Min-hei Ght ', zero or ' auto ' computed ' height ', and no in-flow children

Two vertical margin is folded under certain conditions , i.e. two margin is merged into one.

The merge rule is that the final value is the maximum value in two margin, which is Margin=max (margin1,margin2). If one is a negative value, it is equal to positive minus negative. If all are negative, subtract two negative values with 0.

Margin-bottom	Margin-top	Results
30px	20px	30px
-30px	20px	-10px
-30px	-20px	-50px

The condition of folding is very strict, so long as it does not satisfy any requirement, the folding will not occur.

Let's look at an example that satisfies the condition.

 <  div  class  = "wrap"   >  <  div  class  = "Div1"  ></ div   >  <  div  class  = "Div2"  ></ div  >  </ div  >  

{  background-color: #63BD84;}  {  width: 200px;   Background-color: #42A5CE;} . Div1,.div2 {  height: 100px;   margin: 10px;   background-color: #BDFFF7;}

The end result is this:

The margin-top of the Div1 and the margin-top of the parent element are combined with the margin-top of the body, and eventually the HTML has a margin of 10px (because HTML is the root element and his margin does not collapse).

Div1 's Margin-bottom and Div2 's margin-top were combined.

The Margin-bottom of Div2 and the margin-bottom of the parent element are combined.

This effect can be caused by:

1. These three boxes are all within the normal flow . If Div1 and div2 are floated or absolutely positioned, their margin will not collapse.

Body{margin:0;//The default style of the browser is margin:8;Background-color:#63BD84;}. Container{width:300px;Background-color:#CEE6E6;}. Wrap{Height:300px;width:200px;Background-color:#42A5CE;}. Div1,.div2{float: Left;margin:10px;width:100px;Height:100px;Background-color:#BDFFF7;}

2. They are all in the same block-level formatting context , if the parent element creates a new block-level formatting contexts:

Body{margin:0;//The default style of the browser is margin:8;Background-color:#63BD84;}. Container{width:300px;Background-color:#CEE6E6;}. Wrap{Overflow:Hidden;//Create a new block-level formatting context width:200px;Background-color:#42A5CE;}. Div1,.div2{margin:10px;width:100px;Height:100px;Background-color:#BDFFF7;}

The parent element and the two div are no longer in the same block-level formatting context, so his margin-top and Margin-bottom are no longer merged with the child elements, while DIV1 and Div2 still meet the conditions. So Div1 's margin-bottom still merged with Margin-top.

3. Two margin is not separated by a box, Gap, padding, and border

If I add a line of text between them (to produce a box), or to set the length of the parent element (which increases the gap), or to add padding to the parent element, or to set a border for the parent element, the quarantined two margin will no longer be merged:

Add a row box to set the height of the parent element to add a gap

Add padding Set border

In summary, determine whether two margin will collapse, to determine whether they meet the following three conditions:

1. are in the normal stream.
2. In the same block-level formatting context
3. Not blocked by box, void, inner fill, border.

About padding

• Cannot have negative values
• Padding-top and Padding-bottom are not valid for non-replaced inline elements
• The background style is set by the Background property

About border

• Cannot have negative values
• Padding-top and Padding-bottom are not valid for non-replaced inline elements
• Styles are set by the Border-color and Border-style properties

You can click here for online testing

Reference: Box model

Recognize the standard box model and understand the margin overlay