CSS margin knowledge point and CSS margin knowledge point

CSS margin knowledge point and CSS margin knowledge point
1. Percentage value of margin

Percentage of common elements relative to the containerElement width).

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

The result is as follows:

The result margin value is 800 * 10% = 80px.Container width calculation the container width Calculation. Three times

2. Percentage of absolute positioning maigin Value

RelativeFirst located ancestor Element. Is the width of parent = 1000px. So margin = 100px;

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

For example, there are two containers

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

　　

4. Why does the overlap of margin exist?

A) two overlapping features of margin

It only occurs on the horizontal element of the block. (Excluding float and absolute elements)

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

B) Events

1> adjacent sibling Elements

2> the first and last child elements of the parent level

3> Empty block.

Example 1 adjacent sibling Element

Here are two sibling elements.

There is only one em between the two p and no two em. Because the first margin-bottom overlaps the second margin-top.

Example 2 parent elements overlap with the last child element

According to the general theory, an 80 PX margin-top value is set between son and father of the parent element. But not actually. If the background element of son is not changed, 80 PX is not set;

Here, we only set 80px for the parent element;

　　

Conditions for overlapping Parent and Child margin

　　

So how can we eliminate the overlap of margin-top?

You just need to let it meet those conditions.

Add overflow to the parent element: hidden; border-top padding-top (add a space between them );

Example 3: the margin of the empty block element overlaps.

　　

Note:There is no empty element in the content.. Conditions for overlapping margin of null Elements

　　

4. Overlapping calculation rules of margin.

A) The operator is positive.

B) add positive and negative values

C) Take negative and negative.

5. Significance of margin overlap

A) Continuous paragraphs or lists and so on. If there is no margin overlapping ending, 1: 2 will appear uncoordinated.

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

C) Any number of p elements left blank should not affect the layout of the original reading.

 

Practical Application

When creating a list, control the distance between each list

　　

. List {

Margin-top: 15px;

Margin-bottom: 15px;

}

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