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

In this issue, the editor will bring you about how to understand the usage and features of margin attributes. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Do you know the usage and characteristics of the margin attribute? here we share that the attribute margin can be used to set the four outer margins of the box at the same time, while other margin attributes can only set their own outer margins.

Talking about the attributes of margin from shallow to deep

Margin is translated into outer margin or outer margin in Chinese (outer margin is quoted in this article). It is the basic attribute of the element box model (boxmodel).

1. The basic characteristics of margin

The margin property includes margin-top,margin-right,margin-bottom,margin-left,margin, which can be used to set the marginarea of the box. The property margin can be used to set the four outer margins of the box at the same time, while the other margin properties can only set their own outer margins.

The margin attribute can be applied to almost all elements, except for elements of table display type (excluding table-caption,tableandinline-table), and vertical margins have no effect on non-permutable inline elements (non-replacedinlineelement).

Maybe some friends are a little confused about non-permutation elements (non-replacedelement) to help you understand it a little bit. Non-permutation elements are not clearly defined in W3C, but we can literally understand that non-permutation elements correspond to permutation elements (replacedelement), that is to say, when we understand the meaning of permutation elements, we understand non-permutation elements. The replacement element is defined in W3C:

◆ reference:

"AnelementthatisoutsidethescopeoftheCSSformatter,suchasanimage,embeddeddocument,orapplet"

We can understand from the definition that replacement elements (replacedelement) mainly refer to elements such as img,input,textarea,select,object that have CSS formatting appearance scope by default. Furthermore, it can be known that non-permutation elements (non-replacedelement) are elements other than permutation elements such as img,input,textarea,select,object.

Margin is always transparent.

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 containingblock to which the box is applied (Note: the containingblock of an element is a rectangle referenced when calculating the position and size of the box (es) generated by the element. Read more: "ContainingBlock"). 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:toprightbottomleft

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:

◆ reference:

1. If there is no left value, use right instead

two。 If there is no bottomvalue, use top instead

3. 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:toprightbottom; in the order of values, according to the principle, the value of left is replaced by right.

Margin:10px20px30px; equals margin:10px20px30px20px.

two。 If margin has only two values, bottom and left are missing for margin:topright; in 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:10px20px; equals margin:10px20px10px20px.

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, the value of left is also replaced by top.

Margin:10px; equals margin:10px10px10px10px.

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 boxmodel. 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 containingblock 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 containingblock 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:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> untitled document title > div {width:200px;height:200px;background:#ccc;} style > head > the value types of margin-width for outer margins are: auto | length | percentagediv > body > html >

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:-10px20px-30px40px

◆ 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 containingblock of div is the blockbox 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 containingblock'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. For the time being, I use logical size and physical size to distinguish (in fact, this concept has been used above). What 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.

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

The above is the editor for you to share how to understand the usage and characteristics of margin attributes, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.