Shulou(Shulou.com)06/03 Report--

This article is about the usefulness of the margin attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Part one: basic knowledge of margin--

To introduce the basics of margin, we can't 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: outer margin (margin), border (border), inner margin (padding), and innermost content (content). The following figure is the box model (here we only talk about the standard box model of the W3C specification, not the non-standard box model used by IE5 and IE6 in weird patterns):

The margin we want to introduce is in the outermost layer, because the margin (outer margin) must be transparent, so it can be used to make a certain gap between different boxes to achieve beautiful layout and other effects. From the box model above, we can see that margin exists all around, and we can set the margin values in these four directions using margin-top, margin-right, margin-bottom, and margin-left, respectively. (note: as this part of the knowledge is relatively basic, I will not introduce it any more in this section.)

Part II: application of margin-- to sibling elements (non-parent-child relationship)

This part mainly introduces the merging of outer margins in horizontal direction and vertical direction.

(1) merging of outer margins in horizontal direction

If two horizontal boxes meet, the final distance between them is the sum of the right outer margin of the left box and the outer margin of the right box.

Example 1:

The code is as follows:

Two horizontal boxes * {margin:0; padding:0; border:0;} body {font-size: 0;} .left {width: 100px; height: 100px; background: red; display: inline-block Margin-right: 50px; font-size: 20px;} .right {width: 100px; height: 100px; background: yellow; display: inline-block; margin-left: 50px; font-size: 20px;} width is 100px, right margin is 50px width is 100px, left margin is 50px

The effect is as follows:

The distance between the two happens to be 100px.

Note: you can see that in order to make the two div (block elements) away from the normal document flow I used the display:inline-block; attribute, in addition, I also set the font-size of body to 0, which can solve the problem of inline-block itself, otherwise the examples of two div will be greater than 100px. Of course, using float can also make two div appear on the same line.

(2) merging of outer margins in vertical direction

When two vertical boxes meet, the distance in the vertical direction is equal to the lower outer margin of the upper box and the larger upper outer margin of the lower box.

Example 2:

Two horizontal boxes * {margin:0; padding:0; border:0;} .top {width: 100px; height: 100px; margin-bottom: 100px; background: red;} .bottom {width: 100px Height: 100px; margin-top: 50px; background: green;} height is 100px, bottom margin is 100px, height is 100px, upper margin is 50px

The effect is as follows:

At this time, we can see with the naked eye that the example of the two vertical directions is about 100px (actually 100px) rather than 100mm 50mm 150px; this is precisely because when two vertical boxes meet, the distance in the vertical direction is equal to the lower outer margin of the upper box and the larger upper outer margin of the lower box.

Another interesting example is that if there is an element with both margin-top and margin-bottom set, but the content is empty, the two margin values will also be superimposed, the largest of the two, which is similar to the superposition of the margin values of the two boxes in the vertical direction. The code is as follows:

Two horizontal boxes * {margin:0; padding:0;} .top {width: 500px; height: 100px; background: red;} .middle {margin-top: 100px; margin-bottom:50px } .footer {width: 500px; height: 100px; background: green;} div above, div under high 100px, high 100px

The final effect is as follows:

We find that the example between the div above and the div below is not 100+50=150px, but the largest of the two, 100px.

So why does the W3C set such a standard instead of setting the same standard as the horizontal one? That is, the superposition of margin values, in fact, there is a certain degree of truth. For example, we need to design a page made up of several paragraphs. We need to set up margin-top and margin-bottom so that there is a distance between the first paragraph and the top of the page, so that there is a distance between the last paragraph and the bottom. The following is the effect of no overlay and overlay:

We can see that the page on the left does not overlap, so the example between the two paragraphs is the top double spacing, while the page on the right overlaps, then all the spacing is equal. Maybe that's the purpose of setting the standard, who knows?

Part III: the application of margin-- between parent elements and child elements (emphasis)

The second part introduces the use of margin between sibling elements, while this part will introduce the most interesting application of margin between parent and child elements. In this part, we also discuss it from two aspects. On the one hand, the child element sets the edge value in the horizontal direction, and on the other hand, the child element sets the edge value in the vertical direction.

(1) set the horizontal margin value in the child element

We can set margin-left to control the example between the left border of the child element and the left border of the parent element.

Example 3:

Margin * {padding:0; margin:0; border:0;} .background {width: 500px; height: 500px; background: red;} .son {width: 100px; height: 100px; background: green; margin-left: 100px } the width is 100px, and the marginal left is 100px.

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. Unlike setting margin between sibling elements, because margin between sibling elements does not take padding into account, but it is different in parent and child elements, what would it look like if there were padding in the parent element? Take a look at the following example:

Example 4:

Let's add the padding value to the parent element based on the above example.

Margin * {padding:0; margin:0; border:0;} .background {width: 500px; height: 500px; padding:100px; background: red;} .son {width: 100px; height: 100px; background: green; margin-left: 100px } the width is 100px, and the marginal left is 100px.

The above code adds the padding value of 100px to the parent element, with the following effect:

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

However, after measurement, we can find that the distance between the left frame of the child element and the left frame of the parent element is 200px, because there is also the left padding value of 100px. In the previous example, I did not observe it because I did not set the padding value, so this shows that setting margin-left in the child element is actually the distance between the left frame of the child element and the inside of the left padding of the parent element.

The use of 5:margin-right is similar to that of margin-left, and I'll give you only one example here.

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

Margin * {padding:0; margin:0; border:0;} .height {width: 500px; height: 500px; padding:100px; background: red;} .son {float: right; width: 100px; height: 100px; background: green The width of margin-right: 100px;} is 100px; the width is 100px; the width is 100px.

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

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

(2) set the margin value of the vertical direction in the child element

Based on previous experience, in theory, we can also set the value of margin-top so that there is a distance between the upper border of the child element and the inside of the upper padding of the parent element. Then let's try it!

Example 6:

Margin * {padding:0; margin:0; border:0;} .background {width: 500px; height: 500px; background: red;} .son {width: 100px; height: 100px; background: green; margin-top: 100px The height is 100px, the height is 100px, the margin top is 100px.

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

This is not what we want, ah, we want the upper part of the child element to be 100px from the top of the parent element, but what we see is that the upper part of the parent element is 100px away from the top of the browser page. Why? What's wrong with it?

In fact, this is because when the parent element does not set the padding value and the bug-- value, it appears that the top of the parent element and the top of the child element are completely coincident and cannot be separated. That's why the parent and child elements are going down at the same time.

There are several ways to solve this problem:

Method 1: add a padding-top value to the parent element

Method 2: add a border value to the parent element

Method 3: add the attribute overflow:hidden to the parent element

Method 4: declare a floating float to the parent or child element

Method 5: declare the parent or child element as absolute positioning: position:absolute

Method 6: add the attribute overflow:auto; positon:relative; to the parent element (Note: this method is added later, thank you @ elf Pawn for providing this method)

Method 1: based on example 6, add padding-top:1px; to the css code of the parent element as follows:

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

Method 2: based on example 6, add border-top:1px solid transparent; to the css code of the parent element as follows:

The same effect has been achieved, but the disadvantages are the same as method one.

Method 3: based on example 6, the effect of adding overflow:hidden; to the css code of the parent element is as follows:

The effect is also achieved, and there is no error. It can be called "tweeter"!

Method 4: declare float; to the parent element or child element based on example 6. Add float:left; to the child element css code or add float:left; to the parent element css code to achieve the effect. The same image is not shown here.

Advantage: no pixel error. Cons: float is sometimes unnecessary.

Method 5: add a position:absolute; attribute to the parent or child element. The same effect can be achieved.

Advantages: same as method 4. And it won't make any difference as long as we don't use top and left, so this is also a good approach.

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

Part IV: several cases when the unit of margin value is%.

I used margin when I gave an example before, and its values are all in units of px, which is not a problem to understand. But what if the margin value is in%? In fact, the percentage (%) is relative to the parent element (container) of the element, both for sibling elements and parent-child elements. (thanks again to the blog friend @ elf Pawn for your advice! Based on this recommendation, this section is supplemented) but unexpected results can occur when using vertical margin in sibling elements, as shown in the following example.

(1) sibling elements use margin with a value of% horizontally.

Example 7:

Margin * {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%;} width is 200, width without margin is 200, marginal left is 20

In this example, you set two elements to float to the left so that you can observe the margin of both horizontally. There is no margin in the left div and 20% margin-left in the right div. The effect is as follows:

You can see from the effect that the distance between the two div is always 20% of the parent element (here the parent element of the div on the right is body, and its width is the width of the browser).

(2) sibling elements use margin with a value of% in the vertical direction.

Based on the inspiration of example 7, we can guess that if you use margin in the vertical direction and the unit of the value is%, the final distance between the two will be a percentage of the parent element (body in the example above). So is this the case? Look at the following example.

Example 8

Margin * {margin:0; padding:0;} .first {width: 200px; height: 200px; background: green;} .second {width: 200px; height: 200px; background: red; margin-top: 10% } the height is 200, the height without margin is 200, the height of marginal top is 20%.

Here the div above has no margin, and the margin-top of the div below is 10. The effect is as follows:

We found that when I was reducing the height of the browser, the spacing in the vertical direction did not shrink! When I reduced the width of the browser, the distance in the vertical direction narrowed!

This means that margin is used vertically between statistical elements, which is relative to the width of the parent element when the unit of the value is%.

So why isn't it as high as we want it to be relative to the browser? There is a great god in Zhihu who explains it like this:

(3) parent and child elements use margin with a value of%

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

Example 9

The code is as follows:

Document * {margin:0; padding:0;} .height {width: 500px; height: 300px; background: red; overflow: hidden;} .son {width: 100px; height: 100px; background: green Margin-top: 20%; margin-left: 20%;}

In this example, I set the value of margin-left to 20%, the value of the parent element to 20%, the width of the parent element to 500px, and the height of the parent element to 300px. Let's see how it works.

As you can see from the figure above, the margin-top value of the child element is also relative to the width of the parent element rather than the height.

Thank you for reading! This is the end of this article on "what is the use of margin attributes in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.