Explain in detail the problem of overlap of outer margin (collapse of outer margin) and its solutions

Outer margin overlap can also be called outer margin collapse
If the purpose is to make the vertical spacing of some elements the same, then the outer margin overlap is really fragrant. There is no need to worry about the outer margin overlap of the two.
The outer margin overlap is just like the literal meaning. The upper and lower margins of different elements overlap together.
The official explanation is:

The upper margin top and lower margin bottom of a block are sometimes combined (collapsed) into a single margin, and their size is the maximum value of a single margin (or only one of them if they are equal). This behavior is called margin folding.

1, Which elements have overlapping outer margins???

From the official interpretation, we can see that it is the upper and lower outer margins of block elements, so it means that only block elements will overlap the outer margins, and neither inline elements nor inline block elements will overlap the outer margins

2, Under what circumstances will the outer margin overlap???

There are three cases of overlapping outer margins:

The first case occurs between adjacent elements in the same layer

<div id="#box1"></div>
<div id="#box2"></div>
<style>
  #box1{
      width: 200px;
      height: 200px;
      background: lemonchiffon;
      margin-bottom: 50px;
    }
    #box2{
      width: 200px;
      height: 200px;
      background: lightcoral;
      margin-top:100px ;
    }
    </style>

In case of boundary overlap, only the maximum boundary range will be selected, so the margin between the two is 100px
If you need to solve this boundary overlap problem, you need to add float to the latter element

The second case: no content separates the parent element from the descendant element
for instance:

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

As can be seen from the code, our goal is to make the child element 100px away from the top of the parent element. Unfortunately, the result is always unexpected. The parent and child will move 100px away from the top.

Is there any way to separate them?

Method 1: add overflow: hidden to the parent element;
This method solves the problem of overlapping outer margins, but this method is only applicable to "the height of the child element plus the outer margin height is less than the height of the parent element (childheight + margin top < parentheight)", otherwise part of the contents of the child element will be hidden

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //New add
      overflow:hidden;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

Method 2: add a border to the parent element
If the outer borders of parent and child elements overlap, we will add a border to the parent element, and their outer margin will have the spacing of the border, but there will be more unnecessary borders

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //New addition
      border:1px solid lightseagreen;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

Method 3: set display: inline block for parent or child;
Since only the block element will produce the outer margin overlap, let's make it not a block element and set it as an inline block element

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //display:inline-block;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
      //New addition
      display:inline-block;
    } 
</style>

Method 4: set float for parent or child

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //float:left;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
      //New addition
      float:left;
    } 
</style>

Method 5: set position: absolute for the parent or child;

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //position:absolute;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
      //New addition
      position:absolute;
    } 
</style>

Method 6: add padding to the parent element

<div>
	<p></p>
</div>
<style>
#box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      //New addition
      padding:10px;
    } 
    #box2{
      width: 100px;
      height:100px;
      background:darkgoldenrod;
      margin-top:50px ;
    } 
</style>

The third case: empty block level elements

  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <style>
 #box1{
      width: 200px;
      height:200px;
      background:lightseagreen;
      margin-bottom:20px ;
    } 
    #box2{
      margin-top: 20px;
      margin-bottom:20px ;
    }
    #box3{
      width: 200px;
      height:200px;
      background:darkgoldenrod;
      margin-top:20px ;
    }  
</style>

The interval in the middle is only 20px. There will be no superposition, and only the maximum value will be taken

3, How is the outer margin overlap calculated???

  1. The two positive numbers take the largest number
  2. The two negative numbers take the number with the largest absolute value
  3. One positive and one negative take the sum of the two

Tags: css3 html5 html css

Posted on Thu, 30 Sep 2021 21:18:16 -0400 by dunn_cann