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

This article introduces the basic writing and characteristics of margin attributes, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Do you know the concept of margin attribute? here we share with you that 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).

Learn margin attributes 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.

On the margin attributes of the basic writing and features what is shared here, I hope that the above content can be of some help to 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.