Analysis of usage and common problems of margin in CSS

We are familiar with margin. This article mainly introduces the usage of margin in CSS and the analysis of common problems. The introduction in the article is very detailed and has certain reference and learning value for everyone. Friends who need it can follow Let’s take a look together.

1. Introduction

marginWe are generally used to calling it margins. We can set the margins in four directions respectively. No more details here. Describe the assignment syntax in detail.

Actually, the margins we usually set are physical-level settings, and margins also include start, end, before, after, etc. These are mainly logical-level settings. If you are interested, Google it yourself. .

When setting margin, we must know:

• For block-level elements, how effective is margin in four directions;

• For inline elements, margin is only effective in the horizontal direction.
  

2. Box model

Speaking of margin, I have to talk about the box model:

1. Content => padding => border => margin

The reason why the box model needs to be understood from the inside and outside is mainly because the standards of the box model are different. It determines what the width we set in CSS is. At this time, everyone will think of those calculation formulas. In fact, with the arrival of CSS3, we can set the standard of the box model through box-sizing:

2. border-box: width is calculated from border;

3. content-box: width is calculated from content;

4. padding-box: has been calculated from removed from the standard.

Here’s another picture, are you already aware of it?

##3. Margin overlap problem

1. Occurs in adjacent sibling elements

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

2. Occurs at the parent-child node

    p(class="b")
    p(class="a")
        p(class="c") C

    .a {
        margin: 20px 0;
    }
    .b {
        margin: 100px 0;
    }

• The parent element sets the border;

• The parent element sets the padding ;

• The parent element sets overflow to hidden or scroll, others are not applicable;

• The parent element sets position to fixed or absolute, others not applicable.

4. Magical negative margin value

• Setting negative values ​​for top and left will move the element up or to the left by the corresponding pixel distance;

• setting bottom and right Negative values ​​will move adjacent elements up or to the left.

    .item {
        margin: 0 200px;
        height: 200px;
    }

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

5. Margin and float

• Adjacent sibling elements, if both of them are floating element, no margin overlap will occur;

• For parent-child elements, if one of them is a floating element, no margin overlap will occur;

  
  

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

    .clearfix::after {
        clear: both;
    }

学完本文相信大家对css 中margin属性有更深的认识，大家赶紧收藏起来吧。

相关推荐：

CSS的margin有什么作用

有关margin负值浅析

分享一篇关于margin的相关技巧

The above is the detailed content of Analysis of usage and common problems of margin in CSS. For more information, please follow other related articles on the PHP Chinese website!