In-depth understanding of the margin attribute in css

I used to think that the margin attribute was a very simple attribute, but recently I encountered some problems while working on a project, and I discovered that there are still some "pits" in the margin attribute. , below I will introduce the basic knowledge of margin and those "pits". This blog post is mainly divided into the following parts:

margin--Basic knowledge

margin--In elements at the same level (non-parent-child Apply

margin between relationships)--Apply between parent elements and child elements ( Key )

margin --Several situations when the unit of margin value is %

Part 1: margin--Basic knowledge To introduce the basics of margin Knowledge, we cannot avoid talking about the css box model (Box Model). Generally speaking, the css box model is used for design and layout. It is essentially a box, including: margin, border, padding and the middle content. The picture below is the box model (here we only talk about the standard box model of the W3C specification, not the non-standard box model used in IE5 and IE6 in weird mode):

The margin we are going to introduce is on the outermost layer. Because margin (margin) must be transparent, it can be used to leave a certain gap between different boxes to achieve beautiful layout and other effects. From the box model above, we can see that margins exist all around. We can use margin-top, margin-right , margin-bottom , and margin-left to set these respectively. Margin values in four directions. (Note: Since this part of the knowledge is relatively basic, I will not introduce it further in this part)

Part 2: margin--at the same time Application between level elements (non-parent-child relationship) This part mainly introduces the merging of horizontal and vertical margins.

(1) Horizontal margin merge Two horizontal boxes meet, then the final distance between them is the right margin of the left box and the right box does the sum of the margins.

## Example 1:

The code is as follows:

##1 2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

DOCTYPE html> ## html lang="en">

head >

meta charset="UTF-8">

## title >Two horizontal boxes title >

margin:0;

body{

# height: 100px;

display: inline-block;

#font-size: 20px;

background: yellow; ## ##margin-left: 50px;

style > ##

head > body

> ##

p class="left">Width is 100px, right margin is 50px p >

p class="right">Width is 100px, left margin is 50px p >

## body > html >

## The effect is as follows:

The distance between the two is exactly 100px at this time.

Supplementary explanation: As you can see, in order to make the two p (block elements) out of the normal document flow, I used the display:inline-block; attribute. In addition, I also changed the body Set font-size to 0, which can solve the problem of inline-block itself ( If you are not clear about the description here, you can read my blog post "Understanding and Applying the Display Attribute in CSS", this article introduces inline-block Existing problems ), Otherwise, the two p examples will be larger than 100px. Of course, you can also use float to make two p appear on the same line.

(2) Vertical margin merging When two vertical boxes meet, their vertical distance is equal to the upper box The larger of the bottom margin of the box below and the top margin of the box below.

Example 2:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

## DOCTYPE html>

## html lang="en"> head > ## meta charset="UTF-8">

title >Two boxes in the horizontal direction title >

style > ## :0;

##

} ##

margin-bottom: 100px;

## ##} ##

## # # style >

## head

>

body >

p

class="top">The height is 100px, the bottom margin is 100px p >

p class="bottom">The height is 100px, the top margin is 50px p

> ## body

> html >

The effect is as follows:

At this time, we can observe it with the naked eye. The vertical direction of the two examples is about 100px (actually 100px) instead of 100+50 =150px; This is precisely because when two vertical boxes meet, the vertical distance is equal to the larger of the lower margin of the upper box and the upper margin of the lower box.

Another interesting example is: Suppose there is an element with margin-top and margin-bottom set at the same time, but the content is empty , then the two margin values will also be superimposed, and the value will be the largest of the two. It is similar to the superposition of the margin values of two boxes in the vertical direction. The code is as follows:

##1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

# DOCTYPE html> html lang="en"> head > ## meta charset="UTF-8">

## title >Two boxes in the horizontal direction title > ## style > ## margin:0;

## #

.top{ ##

height: 100px;

background: red;

}

.middle{

margin-top: 100px;

margin-bottom:50px;

}

.footer{

width: 500px;

height: 100px;

background: green;

}

style >

head >

body >

p class="top">上面的p,高100px p >

p class="middle"> p >

p class="footer">下面的p，高100px p >

body >

html >

The final effect is as follows:

We found that the example between the p above and the p below is not 100+50=150px, but The largest of the two, which is 100px.

So why does W3C set such a standard and not set the same standard as the horizontal direction? That is, the superposition of margin values. In fact, this also makes sense. For example, we need to design a page consisting of several paragraphs. We need to set margin-top and margin-bottom so that there is a distance between the first paragraph and the top of the page, and a distance between the last paragraph and the bottom. The following is the rendering without overlay and overlay:

We can see that the page on the left does not overlap, so the example between the two paragraphs is double the spacing at the top , and the page on the right overlaps, all spacing is equal. Maybe this is the purpose of setting standards like this, who knows?

The third part: margin--applied between parent elements and child elements ( Key points ) Second The part introduces the use of margin between sibling elements, and this part will introduce the most interesting application of margin between parent elements and child elements. In this part, we also discuss it from two aspects. On the one hand, the child elements set the margin value in the horizontal direction, and on the other hand, the child elements set the margin value in the vertical direction.

(1) Set the horizontal margin value in the child element We can set margin-left to control the relationship between the left border of the child element and the left border of the parent element.

Example 3:

##1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

## DOCTYPE html> html lang="en"> head > meta charset="UTF-8">

title >margin title > ##

style > ##

*{padding:0; margin:0; border:0;}

.father{ height: 500px;

background: red;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-left: 100px;

}

style >

head >

body >

p class="father">

p class="son">宽度为100px，margin-left为100px。 p >

p >

body >

html >

I set the margin-left of the child element to 100px; the effect is as follows:

That is, the distance between the left border of the child element and the left border of the parent element is 100px. It is different from setting margin between elements of the same level, because the margin between elements of the same level does not take padding into account, but it is different between the parent element and the child element. So if there is padding in the parent element, the effect will be What kind? Please look at the following example:

Example 4:

Next we add padding value to the parent element based on the above example.

##1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

## DOCTYPE html> html lang="en"> head > ## meta charset="UTF-8">

title &gt ;margin title > ##

style > ##.father{ ## 500px; ## #width: 100px;

height: 100px;

background: green;

margin-left: 100px;

}

style >

head >

body >

p class="father">

p class="son">宽度为100px，margin-left为100px。 p >

p >

body >

html >

The above code adds a padding value of 100px to the parent element. The effect is as follows:

We can see that the distance above the child element is 100px, because the child element It must be in the content part of the parent element, there is no doubt about it.

But after measurement, it can be found that the distance between the left border of the child element and the left border of the parent element is 200px , because there is also a left padding value of 100px. In the previous example, because I The padding value is not set, so it is not observed. So this means setting margin-left in the child element. Its value is actually the distance between the left border of the child element and the inside of the left padding of the parent element.

Example 5: The use of margin-right is similar to the use of margin-left. I will only give one example here.

This example sets the margin-right value in the child element as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

##DOCTYPE html>

html lang="en">

head >

meta charset="UTF-8">

title >margin title >

##*{padding:0; margin:0; border:0;} ## .father{

width: 500px; ##

height: 500px; padding:100px;

## background: red; # .son{

float: right;

width: 100px;

height: 100px;

background: green;

margin-right: 100px;

}

style >

head >

body >

p class="father">

p class="son">宽度为100px，margin-right为100px。 p >

p >

body >

html >

The difference between this example and Example 4 is only the position of the child elements. The effect is as follows:

This example can illustrate that the value of margin-right is the distance between the right border of the child element and the inside of the right padding of the parent element. It's just that I didn't use padding in the previous examples, so I couldn't observe it.

(2) Set the vertical margin value in the child element According to the previous experience, theory Speaking from the top, we can also set the value of margin-top so that there is a certain distance between the top border of the child element and the inside of the top padding of the parent element. So let’s try it!

Example 6:

# #1 2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

# #

DOCTYPE html> ##

html lang="en ">

head > ##

meta charset="UTF-8">

title >margin title > ##

style > ## # .father{

height: 500px;

## ) height: 100px;

background: green;

margin-top: 100px;

}

style >

head >

body >

p class="father">

p class="son">高度为100px，margin-top为100px。 p >

p >

body >

html >

In this example, I set the margin-top to 100px, and the effect is as follows:

This is not the effect we want, we want the child elements to be The upper part is 100px away from the upper part of the parent element, but what we see is that the upper part of the parent element is 100px away from the upper part of the browser page. Why is this? What went wrong?

Actually this is because when the parent element does not set the padding value and border value, a bug occurs--the parent element The top and the top of the child element completely overlap and cannot be separated. That's why the above-mentioned parent element and child element move downward at the same time.

There are several solutions to this problem:

Method 1: Add ## to the parent element #padding-top Value

Method 2: Add border value to the parent element

Method 3: Add the attribute overflow:hidden to the parent element;

Method 4: Declare float to the parent element or child element

Method 5: Make the parent element or child element declared as Absolute positioning : position:absolute;

##Method 6: Add attributes to the parent element overflow:auto; positon:relative; (Note: This method will be added later, thank you blogger @小elvesPawn for providing this method)

Method 1: Based on Example 6, add padding-top:1px in the css code of the parent element; the effect is as follows:

The only disadvantage of the method is that it increases the error by 1px.

Method 2: Based on Example 6, add border-top:1px solid transparent in the css code of the parent element; the effect is as follows:

also achieves the same effect, but has the same shortcomings as method one.

Method 3: Based on Example 6, add overflow:hidden; in the css code of the parent element; the effect is as follows:

also achieved the effect without any error. It’s perfect!!!!

Method 4: Declare float to the parent element or child element; based on Example 6, in the child element Add float:left; to the css code or add float:left; to the parent element css code to achieve the effect. The same picture is no longer displayed here.

Advantages: No pixel error. Disadvantages: float is sometimes unnecessary.

Method 5: Add the position:absolute; attribute to the parent element or child element. The same effect is achieved.

Advantages: Same as method four. And as long as we don't use top and left, there will be no impact, so this is also a good method. (Note: Blogger @laden666666 pointed out that the above methods three, four, and five are actually methods to remove the margin of child elements from penetrating the parent container. They can be classified as bfc methods and are essentially the same. Thank you here)

Method 6: Add overflow:auto; and position:relative; to the parent element to achieve the same effect.

This method has been personally tested and is effective. It is provided by blogger @小elvesPawn. I would like to express my gratitude.

Part 4: Several situations when the unit of margin value is %

I used margin when giving examples before. Its values are all in px, so there is no problem in understanding this. But what if the margin value is in %? In fact, the percentage (%) at this time is relative to the parent element (container) of the element, and this is true for both sibling elements and parent-child elements. ( Thanks again to blogger @小elvesPawn for the suggestions!! Based on this suggestion, this part of the content will be supplemented) However, when using vertical margins in elements of the same level, unexpected results will occur. Here is an example. (1) Elements of the same level use a margin of % in the horizontal direction

Example 7:

1 2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

head >

meta charset="UTF-8">

title >margin title >

style >

*{

margin:0;

padding:0;

}

.first{

float: left;

width: 200px;

height: 200px;

background: green;

}

.second{

float: left;

width: 200px;

height: 200px;

background: red;

margin-left: 20%;

}

style >

head >

body >

p class="first">宽为200，无margin p >

p class="second">宽为200,margin-left为20%; p >

body >

html >

In this example, the two elements are set to float to the left so that the horizontal margin of the two elements can be easily observed. Among them, the left p has no margin, and the margin-left of the right p is 20%. The effect is as follows:

It can be seen from the rendering that the distance between the two p It is always 20% of the parent element (the parent element of p on the right here is body, and its width is the browser width).

(2) Elements at the same level use margin with a value of % in the vertical direction. Based on the inspiration of Example 7, we It can be guessed that if margin is used in the vertical direction and the value unit is %, then the final distance between the two will be a percentage of the parent element (body in the above example). So is this really the case? See the example below.

Example 8

## 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

## head > meta charset="UTF-8"> ##

title >margin title > ##

style > # padding:0; {

## completely: 200px;

##; # #.second{

width: 200px;

height: 200px;

background: red;

margin-top: 10%;

}

style >

head >

body >

p class="first">高为200，无margin p >

p class="second">高为200,margin-top为20%; p >

body >

html >

Here, the upper p has no margin, and the margin-top of the lower p is 10. The effect is as follows:

We found that when I reduce the height of the browser, in the vertical direction The spacing has not been reduced! ! ! And when I reduce the width of the browser, the vertical distance shrinks! ! !

This means that margin is used in the vertical direction between statistical elements. When the value unit is %, it is relative to the width of the parent element.

So why is it not the height relative to the browser as we want? A master on Zhihu explained it this way (original address: https://www.zhihu.com/question/20983035?rf=27109182):

(3) Parent-child elements use a margin of % For parent-child elements, if in If the unit used in child elements is %margin, then the margin value is relative to the width and height of the parent element (note: this is indeed relative to the height of the parent element!).

Example 9 ##

The code is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

##DOCTYPE html>

html lang= "en">

head >

## meta charset="UTF-8"> ##

title >Document title > ##

style > ## ##margin:0; ##

.father{

width: 500px;

height: 300px;

background: red;

overflow: hidden;

}

.son{

width: 100px;

height: 100px;

background: green;

margin-top: 20%;

margin-left: 20%;

}

style >

head >

body >

p class="father">

p class="son"> p >

p >

body >

html >

在这个例子中，我设置了margin-left的值为20%，margin-top的值为20%， 父元素的width为500px,父元素的height为300px。 下面看看效果吧。

从上图可以看出 子元素的margin-top值最终同样是相对与父元素的宽度而非高度。

In-depth understanding of the margin attribute in css

Related articles