This section mainly introduces the usage of margin and analysis of common problems.

A list,

Margin we generally used to call it the margin, can set the margin in four directions, here will not repeat the assignment syntax.

In fact, we usually set margin at the physical level, and margin also has start, end, before, after, etc. These are mainly logical level Settings, if you are interested in Google.

When setting margins, we must know:

  • For block-level elements, margin is efficient in four directions;
  • For inline elements, margins are only valid in horizontal directions.

2. Box model

Speaking of margin, we have to say the box model:

  • Content => padding => border => margin

CSS3: Box-sizing () width: 16px; box-sizing () width: 16px;

  • Border-box: width calculates from border;
  • Content-box: width calculates from content;
  • Padding-box: removed from the standard.

Third, margin overlap

This problem mainly occurs with block elements and is not floating elements (not described here, but more on later), so let’s see what happens.

1. Occurs on adjacent sibling elements

    .a {
        margin: 50px 0;
    }
    .b {
        margin: 100px 0;
    }
Copy the code

In this case, margin overlap occurs, and the distance between adjacent siblings is the maximum margin value. The best way to avoid this situation is to set only margin-top or margin-bottom in the vertical direction.

2. Occurs on the parent node

    div(class="b")
    div(class="a")
        div(class="c") C
Copy the code
    .a {
        margin: 20px 0;
    }
    .b {
        margin: 100px 0;
    }
Copy the code

In this case, we understand that a is 20 pixels away from B, and C is 100 pixels away from A. However, this is not the case. Here we can solve the problem of overlap by:

  • The parent element sets the border;
  • The parent element sets the padding;
  • The parent element sets overflow to hidden or scroll, the others do not apply;
  • The parent element sets position to fixed or absolute.

Magic margin negative

What happens when we give a block element a margin in four directions:

  • Negative values of top and left move elements up or to the left by the corresponding pixel distance;
  • Negative values for bottom and right move adjacent elements up or to the left.

Another point here is that when I looked up the data, I found that many people said that margin negative value can change the width of the element. I want to correct this, which is not a feature of margin negative value, but a feature of margin. For example, in the following CSS, the width of block level elements can be set completely.

    .item {
        margin: 0 200px;
        height: 200px;
    }
Copy the code

Margin assignments are widely used in layouts. For example, if we know the width and height of an element, you can center a margin negative value.

    .item {
        position: absolute;
        background: red;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
Copy the code

Margin and float

As for these two nerve-racking attributes, I just want to say, it really blows up. Above I said that “this problem mainly occurs with block elements and is not floating elements”, here are two more things to add:

  • Margin overlap does not occur if both of the neighboring siblings are floating elements.
  • If one of the parent elements is a floating element, there is no margin overlap;

Mainly because floating elements are not in the normal document flow, it is better to use the method of clearing float. (The following is how bootstrap is implemented)

    .clearfix::before..clearfix::after {
        content: "";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }
Copy the code

If you like this article, please pay attention to my subscription number. I love typing code and check out more content.