CSS margin knowledge points

1.Percentage value of margin

　The percentage maigin of ordinary elements is calculated relative to the width (width) of the container element.

Here we set a container with a width and height of 800 * 600 outside the image. Set img{ margin: 10%; }

The results are as follows

　

The resulting margin values ​​are all 800 * 10% = 80px; so here they are calculated relative to the width of the container. The width of the container is calculated. The width of the container is calculated . Say it three times

2. Percentage maigin value of absolute positioning

　

It is calculated relative to the width value of the first positioned ancestor element of . That’s parent’s width = 1000px. So margin = 100px;

3. You can use margin to achieve 2:1 adaptation

For example, there are two containers

　　

The height of the box here is not specified. Due to setting margin 50%. Its height is half of the parent container, so the aspect ratio is 1:2;

　

4. Why do margins overlap?

A) Two overlapping characteristics of margin

Only happens on horizontal elements of block. (excluding float and absolute elements)

Ignoring wirte-mode (that is, writing format), only occurs in the vertical direction (margin-top margin-bottom)

　B) What happened

　1> Adjacent sibling elements

　2> The first and last child element of the parent

　3> Empty block.

Example 1 Adjacent sibling elements

　 

Here are two brother elements.

　 There is only one em between the two p here, not two em. Because the first margin-bottom and the second margin-top overlap.

Example 2 The parent element and the last child element overlap

　

According to conventional theory, a margin-top value of 80px will be left between son and father of the parent element. But it doesn't. The background element of son has not changed and no 80px is left;

Here we just set 80px for the parent element;

　

Conditions for parent-child margin overlap

　

　　So how to get rid of margin-top overlap?

As long as it doesn’t meet those conditions.

The parent element adds overflow: hidden; border-top padding-top (add a space between them);

Example 3: The margins of empty block elements overlap.

　 　

　

Note that there is an empty element with no content inside . Conditions for margin overlap of empty elements

　

　4 Calculation rules for margin overlap.

A) Take the maximum positive value

　B) Adding positive and negative values

C) Take the most negative number.

5. The meaning of margin overlap

A) Continuous paragraphs or lists, etc., if there is no margin overlap and the ending appears 1:2, it will appear uncoordinated

B) Nesting or placing divs directly anywhere in the web will not affect the original layout

C) Any missing empty p elements should not affect the original reading layout

Practical Application

When making lists, control the

in the distance of each list

　

　.list{

　margin-top: 15px;

　margin-bottom: 15px;

　}

More robust, even if the last one is removed, the layout will not be affected