💪 Since ancient times, great achievements have not only been achieved with extraordinary talents, but also with great perseverance. – su shi

But first, let me Lao

Why write this blog post? Because of the overlapping problem of margin, the CSS attribute, we often encounter many problems in the development process, which will lead to chaos in the overall layout of our page. Today, through this blog post, we will study the problem of margin overlap.

Margin overlap problem

Margin overlap occurs only on block-level elements, such as

, and not on elements outside the document flow, such as when the float property is set, or when the value of position is absolute.

Margin overlap occurs

  1. Margins of adjacent sibling elements overlap

    The sample code looks like this:

    <! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Margins of adjacent sibling elements overlap</title>
    <style>
      .box {
        width: 600px;
        height: 100px;
        line-height: 50px;
        text-align: center;
        color: # 333;
      }
      .box1 {
        background-color: #f60;
        margin-bottom: 100px;
      }
      .box2 {
        background-color: #a90;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </body>
</html>
Copy the code

    If we follow our normal logic, the margin between box1 and box2 should be 200px, but this is not the case, as shown below

    In fact, there is already a margin overlap problem.

  2. Parent and child margins overlap

    The sample code looks like this:

    <! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Parent and child margins overlap</title>
    <style>
      .box {
        line-height: 50px;
        text-align: center;
        color: # 333;
      }
      .parent {
        width: 600px;
        height: 100px;
        background-color: #f60;
        margin-top: 100px;
      }
      .child {
        width: 600px;
        height: 50px;
        background-color: #a90;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box parent">
      <div class="box child">child</div>
    </div>
  </body>
</html>
Copy the code

    If we just look at our code, the parent’s margin-top is 100px, the children’s margin-top is 50px, and the total is 150px, but the actual result is as follows:

    The parent and child margin overlap problem can be realized without any of the following terms

    Margin – top overlap

    1. The parent element is not a BFC element.
    2. No parent elementborder-topattribute
    3. No parent elementpadding-topattribute
    4. There are no inline elements separating the parent element from the first child element.

    Margin – bottom overlap

    1. The parent element is not a BFC element.
    2. No parent elementborder-topattribute
    3. No parent elementpadding-topattribute
    4. There are no inline elements separating the parent element from the first child element.
    5. The parent element has no height limitation

  3. The margins of empty block elements overlap

    The sample code looks like this:

    <! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>The margins of empty block elements overlap</title>
    <style>
      .parent {
        width: 600px;
        height: 10px;
        background-color: #f60;
      }
      .child {
        margin: 50px 0;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

Copy the code

    The code results are as follows:

    The child element’s margin overlaps with the body’s 8px margin.

    Margin overlap triggers for empty block elements must meet the following conditions

    1. Elements are notborderattribute
    2. Elements are notpaddingattribute
    3. There is noinlineThe element
    4. No height is set.

Margin overlap calculation rules

The calculation rules for margin overlap are as follows:

  1. The margin of two positive numbers takes the largest margin as the margin.
  2. If one is positive and one is negative, the final margin is the sum of the two.
  3. If both values are negative, the final margin takes the largest absolute value.

Write in the last

Since margins overlap, we should make good use of this feature in practical development. For example, when writing a list, try not to write only the margins or the bottom margins, try to write both together, so that the layout of the bottom or the head is not what we want