A detailed introduction to the margin knowledge point of CSS

percent Value of 1.margin the percentage of ordinary elements Maigin is calculated relative to the width of the container element (width).

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

The results are as follows

　
Results The margin value is 10% = 80px; So here are calculation of the width of the container relative to the width of the container calculated by the width of the container. Say it three times.

2. Absolute positioning percent Maigin value

Calculated relative to the width value of the first positioned ancestor element . Is the width of the parent = 1000px. So margin = 100px;

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

For example, there are two of containers

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

4. Why does the overlap of margin overlap

A) two properties of margin overlap

will only occur on the horizontal element of the block. (not including float and absolute elements)

Do not consider Wirte-mode (that is, the writing format) only occurs in the vertical direction (margin-top margin-bottom)

B) The situation that occurred

1> adjacent sibling elements

2> the first and last child elements of a parent

3> the empty block.

Example of an adjacent sibling element

Here are two sibling elements.

There's only one em between the two P and no two em. Because the first Margin-bottom and the second margin-top overlap.

Example two parent and last child elements overlap

According to the conventional theory, the father of the son and the parent element will leave a value of 80px margin-top. But not really. Son's background element did not change without leaving 80px;

This only sets the parent element to 80px;

Conditions for parent-child margin overlap

So how do you kill margin-top overlap?

As long as you don't let it meet those conditions.

parent element Add Overflow:hidden; Border-top padding-top (add a space between them);

Example the margin overlap of three empty block elements.

Notice that there are no empty elements in the contents . Conditions where margin overlap occurs for empty elements

4 margin overlapping calculation rules.

A) positive fetching large value

B) Addition of positive and negative values

C) Negative negative take the most negative.

5. Meaning of margin overlap

A) Consecutive paragraphs or lists, if there is no margin overlap, 1:2 will appear uncoordinated.

B) nesting or direct placement of P anywhere on the web will not affect the original layout

C) left empty of any number of P elements do not affect the original reading layout

Practical application

When making a list, control the distance from each list.

. list{

margin-top:15px;

margin-bottom:15px;

}

More robust even if the last one is removed will not affect the layout