Specific tips for using CSS margin

This time to give you a detailed explanation of the CSS margin of the special use of skills, details of the CSS margin special use of tips on the points of attention, the following is the actual case, a look.

First, Introduction

Margin we generally used to call it the margin, respectively, can be set in four directions of the margin, here no longer repeat the assignment syntax.

In fact, the margin we usually set is the physical level setting, and the margin has start, end, before, after, and so on, these are mostly logical levels of settings, if you are interested in it, Google it yourself.

When setting margin, we have to know:

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

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

Second, box model

When it comes to margin, we have to say the box model:

1. From inside content = padding = border = margin

box model to the end of the understanding, mainly the box model of the standard is not the same, it is decided that we set the CSS in the width of the end is what, then we will think of that several calculation formula, in fact, the arrival of CSS3, we can set the box model by Box-sizing Standard:

2, border-box:width from border start calculation;

3, Content-box:width from the content began to calculate;

4, Padding-box: Has been removed from the standard.

One more picture, is it clear to the chest?

Third, margin overlap problem

This problem occurs mainly on the block element and is not a floating element (it is not clearly described here and will be detailed later), so let's see what happens.

1. The adjacent sibling elements occur

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

margin overlap of adjacent sibling elements

This situation occurs when margin overlaps, the distance between adjacent sibling nodes is the maximum margin value, the best way to avoid this situation, in the vertical direction, only set Margin-top or Margin-bottom.

2, occurs in the parent-child node

    P (class= "B")    P (class= "a")        p (class= "C") c

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

Margin overlap occurs for parent-child nodes

Here according to our understanding should be a distance B is 20 pixels, C distance A is 100 pixels. But this is not the case, here we can solve the overlapping problem by the following methods:

• parent element set border;

• parent element set padding;

• The parent element is set overflow to hidden or scroll, and the other is inappropriate;

• The parent element is set position to fixed or absolute, and the other is not applicable.

Four, the Magic margin negative

What happens when we set the margin in four directions for a block element:

• Top and left sets a negative value, which moves the element up or down by the corresponding pixel distance;

• Bottom and right set negative values, which move adjacent elements up or to the left.

Here is also a point, check the information, found a lot of people say margin negative can change the width of the element, here I would like to correct, this is not a margin of negative properties, but the characteristics of margin, such as the following CSS, you can fully set the width of block-level elements.

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

The use of margin assignments in layouts is extensive, such as the wide height of an element that we know you can center by a negative margin.

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

Five, margin and float

I just want to say that it really exploded when I mixed up these two annoying attributes. As I said above, "this problem mainly occurs on the block element and is not a floating element", here are two points to add:

• Adjacent sibling elements, if the two are floating elements, there is no margin overlap;

• Parent-child element, if one is a floating element, no margin overlap occurs;

Mainly because the floating element is not in the normal flow of the document, so it is better to use the method of clearing floating. (for the implementation of Bootstrap)

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

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

You don't know the upset CSS properties

What is the difference between href and src, link, and @import?

How the absolute positioning of CSS is compatible with all resolutions