Explain margin collapsing of CSS

Time:2019-5-21

Preceding text

This is a classic old question, because it happened to be asked by a reader’s friend before. By the way, sort it out.

Start with a simple example

Let’s start with a simple example:

<style>
    .slide1 div {
      margin:10px 0;
    }
  </style>
 <div class="slide1">
    <h3> Type 1 Outer Margin Folding: Brother Element</h3>
    <p> Text spacing 10px</p>
    <p> Text spacing 10px</p>
  </div>

Look at the two in this example.pLabel, defined by style: firstpOfmargin-bottomAnd second.pOfmargin-topIt’s all 10px, so the actual distance should be equal to 20px, but if you look at it with a browser, you can see that the final distance is10px。 This example is outer margin folding: the upper and lower margins of block-level elements sometimes merge (or fold) into an outer margin.

Classification situation

Outside margin folding has three basic situations:

  1. Adjacent elements
  2. The parent element and the first child element (or the last child element, remember to go back and think about why this is the first or last one)
  3. Empty block-level elements

First of all, in the preceding example, the first case is the folding of the outer margin between two adjacent elements.

The second and third cases are as follows:

<style>
    .father {
      background-color: green;

    }
    .child {
      margin-top: 50px;
      background-color: red;
      height: 300px;
    }
    
      .slide3 {
      margin: 10px 0;
    }
  </style>
  <h3> The second outer margin folding: parent element and first child element</h3>
  <div class="slide2 father">
    <! - The parent element is green - >.
    <div class="slide2 child">
      <! - The child element is red - >.
    </div>
  </div>
  <h3> Type 3 Outer Margin Folding: Empty Block Level Elements</h3>
  <div class="slide3"></div>

Their images are also shown as follows:

Case 2: The outer margin of the child element “shifts” to the outer margin of the parent element

Case 3: The upper and lower margins of the element collapse

Well, let’s take a look at the commonalities of these situations. (I suggest drawing their box model, but I won’t do it when I’m lazy.) We can find the common reason for the folding of outer margins: direct contact between margins, no barriers.

How to understand direct contact? It’s simple:

  • In the first example, two<p>Vertical direction of labelmarginIt is in direct contact.
  • In the second example, because of the parent element’spadding,borderIt’s all zero, somarginIt also has direct contact with its sub-elements. (This example is easy to understand if you draw a box model.)
  • In the third example, the upper and lower margins of the empty element itself are also in direct contact.(padding,borderAlso 0)

The result of folding in various cases

How to calculate the folded margin can be verified simply.

  • If both outer margins are positive, the folded margin should be the larger one.
  • If the two margins are positive and negative, the folded margin is the sum of the margins.
  • If both margins are negative, the folded margin is the sum of smaller margins.

How to Prevent Outside Margin Folding

As mentioned earlier, the reason for the folding of the outer margin is that the outer margin contacts directly, so the way to prevent the folding is to block the direct contact. The methods of combination include:

  • Nested case as long asborder padding Not zero, or yes.inlineElement separation, such as adding a line of text to the parent element (you can try it directly in case 2)
  • Any way of blocking by means of bfc, such as floating,display:tableAnd so on.BFCUnfamiliar students check first, I add later)

Summary

It should also be added that the basic situation discussed above can also be combined in the basic situation, such as between multiple adjacent elements, nesting of multi-layer descendant elements, etc., to understand the basic principles, other cases as long as write a small demo verification will be well understood. Then it is the usual practice: if the content is wrong, please point out (feel that you do not understand or feel uncomfortable, so that Tucao is no problem at all).

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Original address: https://segmentfault.com/a/1190000016842993

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]