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

This article will explain in detail how to use the margin attribute in CSS. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I. the characteristics of Margin

Margin is always transparent.

Margin can set the top, right, bottom, and left margins by using separate properties. Namely: margin-top, margin-right, margin-bottom, margin-left.

The value types of margin-width for outer margins are: auto | length | percentage

You can also use the abbreviated margin attribute to change all the margins at the same time: margin: top right bottom left; (eg: margin:10px 20px 30px 40px) memory is clockwise "up, down, left" around the element.

And the specification also provides an omitted numerical method, basically as follows:

1. If margin has only one value, it means that the margin at the top, right, bottom and left is the same value. For example, margin:10px; equals margin:10px 10px 10px 10px

2. If margin has only two values, the first value represents the upper and lower margin value, and the second value is the value of the left and right margin. For example: margin:10px 20px; equals margin:10px 20px 10px 20px

3. If margin has three values, the first value represents the upper margin value, the second value represents the value of the left and right margin, and the third value represents the value of the lower margin. For example: margin:10px 20px 30px; equals margin:10px 20px 30px 20px

4. If margin has four values, then these four values correspond to the four margin values on the upper right and lower left, respectively. For example: margin:10px 20px 30px 40px

In practical application, individuals do not recommend the use of three-value margin, first, it is easy to remember wrong, second, it is not easy to modify later, at first, if it is written as margin:10px 20px 30px; in the future, the demand changes will be upper 10px, right 30px, lower 30px, left 20px, you still have to take this margin apart into margin:10px 30px 30px 20px; laborious and thankless, it is better to honestly write it as margin:10px 20px 30px 20px at the beginning. As a matter of fact, don't increase the cost of redevelopment in the future in order to save two bytes now.

Vertical margin merging problem

Don't be intimidated by the above noun. To put it simply, outer margin merging means that when two vertical outer margins meet, they will form an outer margin. The height of the merged outer margin is equal to the larger of the two merged outer margins. You can check out the W3Shool CSS margin merge to learn the basics.

In practice, the problem of vertical margin merging is common in that the margin-top of the first child element will open the spacing between the parent element and the adjacent elements of the parent element, and only cause problems in standard browsers (FirfFox, Chrome, Opera, Sarfi), but perform well in IE. For an example, you can see the following code ("normal" in IE and "bug" in standard browser):

Vertical margin merge .top {width:160px; height:50px; background:#ccf;} .middle {width:160px; background:#cfc;} .firstChild {margin-top:20px;} I really just want to distance myself from my parent element.

According to the CSS specification, IE's "good performance" is actually a mistake, because IE's hasLayout rendering leads to this "good" appearance. Other standard browsers show a "problematic" appearance. Well, if you read W3Shcool's CSS margin merging article above, it's easy to discuss this issue. The reason for this problem is that, according to the specification, if a box is not padding-top and border-top, the top margin of the box will overlap the top margin of the first child element in its internal document stream.

Besides, the white point is: if the upper margin of the first child of the parent element margin-top does not touch a valid border or padding. You will have trouble finding your own "leader" (parent element, ancestor element) layer by layer. As long as you set up an effective border or padding for the leader, you can effectively control the leaderless margin to prevent it from overstepping, falsely passing the edict, and implementing its own margin as the margin of the leader.

As explained above for the solution of vertical margin merging, adding a border-top or padding-top to the middle element in the parent element example solves this problem.

Generally speaking, when this problem is explained here, most articles will not go any further, but as a practical developer, the most important thing is to know why. The original purpose of using margin-top is to separate the parent element, but according to your solution, it is actually a kind of "repair". In order to "repair" the father-son vertical margin, merge the CSS specification "Bug". And force the use of border-top and padding-top on the parent element, uncomfortable, it is not easy to remember, the next time this happens again will forget this rule, and in the page design draft if you do not need border-top to add an upper box, such an addition but icing on the cake, leaving hidden dangers for future changes.

Why do you have to use border-top,padding-top to write such an extra line of code for such a so-called standard specification? You can refer to another article to find the answer in Margin or Padding.

Margin or Padding?

When to use margin:

When you need to add white space on the outside of the border.

When the background (color) is not needed in the space.

When the space between the two boxes connected up and down needs to cancel each other out. For example, the margin of 15px + 20px will get the white space of 20px.

When should padding be used at that time:

When you need to add blanks to the border internal test.

When a background (color) is needed in the space.

The space between the two boxes connected up and down, hopefully equal to the sum of the two. For example, the padding of 15px + 20px will get the white space of 35px.

Personally, I think: margin is used to separate the distance between elements; padding is used to separate elements from content. Margin is used to lay out separate elements so that elements are irrelevant to each other; padding is used to separate elements from content, allowing a "breathing distance" between content (text) and (wrapped) elements.

Second, the basic writing method of margin

The value types of margin-width for outer margins are: auto | length | percentage

Percentage: the percentage is determined by the size of the containing block to which the box is applied (Note: the containing block of an element is a rectangle referenced when calculating the position and size of the box (es) generated by that element. The same holds true for margin-top and margin-bottom.

The default value for margin is 0, and margin supports negative values.

We mentioned above that the attribute margin can be used to specify the four margins of the box at the same time. If the attribute margin has four values, the values act on the four sides in top-right-bottom-left order, starting at the top of the element and surrounding the element in clockwise order. The expression is as follows:

Margin:top rightright bottombottom left

The four values are separated by a space. The effect is equivalent to:

Margin-top:value; margin-right:value; margin-bottom:value; margin-left:value

And the specification also provides an omitted numerical method, and the basic principles are as follows:

If there is no left value, use right instead

If there is no bottom value, use top instead

If there is no right value, use the top value instead.

According to these basic principles, we can omit in three ways, but in any case the value of margin will be greater than or equal to one, and the default value of margin is from top to the end of left, so for the specific case of omission, we can deduce back from left.

1. If margin has only three values and left is missing for margin:top right bottom; in the order of values, according to the principle, the value of left is replaced by right. Margin:10px 20px 30px; equals margin:10px 20px 30px 20px

2. If margin has only two values, bottom and left are missing for margin:top right; according to the order of values. According to the principle, the value of left is replaced by right, and the value of bottm is replaced by top. Margin:10px 20px; equals margin:10px 20px 10px 20px

3. If margin has only one value, bottom, left and right are missing for margin:top; in the order of values. According to the principle, the value of left is replaced by right, the value of bottom is replaced by top, and the value of right is replaced by right top, that is to say, the value of left is also replaced by top. Margin:10px; equals margin:10px 10px 10px 10px.

Third, the analytic logic of margin.

At present, we have learned the basic characteristics and basic writing of margin, but the basic parsing logic of the element margin is still very vague. What is the basis of top, right, bottom and left of margin to promote the formation of box model. For the sake of image and easy to understand the logic of margin, the reference line that is not available on W3C will be introduced in the process of the following explanation. What is a reference line? The guide is the base point at which the margin moves, which is stationary relative to the box. The value of margin is the displacement of box relative to the reference line.

In margin, the reference lines of top, right, bottom and left are not the same type, but are divided into two types. The reference lines of top and left belong to one class, and those of right and bottom belong to another class. So what exactly do they use as their reference lines? Top takes the upper side of the content of containing block or the lower side of the vertical upper connecting element margin as the reference line for vertical downward displacement; left takes the left side of containing block content or the right side of the horizontal left connected element margin as the reference line to move horizontally to the right. The right shifts horizontally to the right with the right side of the border of the element itself as the reference line, and the bottom moves vertically downward with the reference line below the border of the element itself. From the above, we can see that top and left are both external elements for reference, while right and bottom refer to this element. The above displacement direction refers to the case when the margin value is positive, and if it is negative, the displacement direction is opposite.

Maybe the theory sounds boring, let's give an example:

The value types of margin-width for the outer margin of the untitled document div {width:200px; height:200px; background:#ccc;} are: auto | length | percentage

As in the above code, it is very simple, in order to make it easier for us to see the effect, we set the width and height as well as the background color for div.

Now let's add the margin attribute to the style of div, such as:

Margin:-10px 20px-30px 40px

What is the parsing logic of margin at this time? First of all, we need to find out the relationship between the div and the surrounding elements. Div has no connected elements, and the containing block of div is the block box generated by body. Then, according to the principle of the reference line introduced above, the left outer margin of div takes the left side of containing block's content as the reference line, and at this time, the left side of body's content is used as the reference line to move horizontally to the right, and the magnitude of the displacement is 40px, similarly, the upper margin takes the upper edge of body's content as the reference line for vertical upward displacement 10px (negative and positive values are opposite) The lower margin is shifted vertically upward according to the lower edge of the borer of the current div (at this time, the div has been displaced by the upper margin). (at this point, the margin will not change the physical size of the border of the box, but will change the logical size of the box, that is, the elements referenced by the lower edge of the margin of the box start not from the physical position of the box, but from the logical position). The right margin is shifted horizontally to the right according to the right side of the borer of the current div (at this time the div has been shifted by the left margin). Maybe a friend asks you why the order of analysis is different from the order that appears in margin expressions. If the margin expression is analyzed in the order in which it appears, the result is the same, but not in the order of the expression in order to make it easier for everyone to understand.

What exactly is the actual display size of margin? perhaps some friends are confused. I temporarily use logical size and physical size to distinguish (in fact, this concept has been used above), what exactly is logical size and what is physical size?! As you can see in the figure, the physical size refers to the size of the box excluding the margin, that is, the size within the border, while the logical size is the size obtained by the box parsed through the margin parsing rules (which may explain why IE5 made an error in the parsing box model). In the figure above, the actual width displayed by box is equal to the logical size of box, while the actual height displayed by box is equal to the physical size of box, indicating that the actual size displayed by box may be the logical size of box, or the physical size of box, and what the rules are--

Actual size of box = physical size of box + positive margin

This only works for the element itself, and for the related elements that follow it, they only layout according to the logical size of the margin.

If you are not interested in the specific understanding process, then remember the following conclusion I summarized on it, XD

Conclusion:

The final display size of box is equal to the size within the border and border of box plus the positive margin value. A negative margin value does not affect the actual size of the box, if it is a negative top or left value will cause the box to move up or left, and if it is bottom or right will only affect the guide shown in the box below.

This is the end of this article on "how to use 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, please share it out 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.