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;