Web Design Learning: The margin properties of CSS

css| Web | detailed

Margin in Chinese we translate the outer margin or outside filler (the outer margin is referenced in this article). He is the underlying attribute of the element box model (box models).

First, the basic characteristics of margin

The margin property includes Margin-top,margin-right,margin-bottom,margin-left,margin, which you can use to set the margin area of the box. Property margin can be used to set the edges of the box at the same time, while the other margin properties can only set the outer margin of its respective.

The margin attribute can be applied to almost all elements except the elements of the table display type (excluding table-caption, table and inline-table), and the vertical outer margin to the non-permutation inline element (non-replaced inline Element) does not work.

Maybe a friend has a little bit of doubt about the non-replaced element, a little help to understand. Non-permutation elements, there is no explicit definition in the consortium, but we can literally understand that the replaced element corresponds to the permutation element, which means that we understand the meaning of the permutation element and we know the non permutation element. The permutation element, which is defined in theconsortium :

"An element of this is outside the scope of the CSS formatter, such as a image, embedded document, or applet"

From the definition we can understand that the permutation element (replaced element) mainly refers to the img,input,textarea,select,object and so on, such as the default CSS format of the outer range of the elements. Furthermore, non-permutation elements (non-replaced element) are elements other than img,input,textarea,select,object and other permutation elements.

The margin is always transparent.

Second, the basic writing of margin

The Margin-width value types for the outer margin are: auto | Length | Percentage

Percentage: Percent is the containingblock of the box (note: An element of the containing block is the element generated by the box (es) in the calculation of position and size of the reference to a rectangle, detailed reading can be seen: "containing block") is determined by size. The same is true for Margin-top and Margin-bottom.

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

As we mentioned above, attribute margin can be used to specify both edges of the box at the same time. If the property margin has four values, the values are used in the upper-right-left order for the four sides, starting with the top of the element, and surrounding the element in a clockwise order. The expression is as follows:

Margin:top right bottom 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 the omitted numerical notation, the basic principle is as follows:

Reference:
1. If there is no left value, use right instead;
2. If there is no bottom value, use top instead;
3. If there is no right value, the top value is used instead.

According to these basic principles, we can have three kinds of ellipsis, but regardless of the omitted margin value will be greater than or equal to one, and the default value of margin is from top to left end, then for the specifics of the omission, we can go back from the left inverse inference.

1. If the margin has only three values, the margin:top right bottom in the order of the values; Left is missing, according to the principle, the left value has right to replace.

margin:10px 20px 30px; is equal to margin:10px 20px 30px 20px;

2. If the margin has only two values, it is margin:top right in the order of the values; Bottom and left are missing, and the value left by principle is replaced by right, and the value of Bottm is replaced by top.

margin:10px 20px is equal to margin:10px 20px 10px 20px;

3. If margin has only one value, follow the order of the values as margin:top; Bottom, left, and right are missing, and the value of bottom is replaced by the top, which is replaced by top, which means that the left value is replaced by top.

margin:10px is equal to margin:10px 10px 10px 10px;

The analytic logic of three-margin

At present, we have learned the basic characteristics of margin and basic writing, but the basic parsing logic of element margin is still very vague, in the end margin top, right, bottom and left are based on what is the benchmark to make box model formation. For the sake of the image, understand the logic of the margin to explain, the following process, will introduce the view of the world's no reference line. What is a reference line? A reference line is a datum point that margin moves, and this datum point is static relative to the box. The margin value is the amount of the box's displacement relative to the reference line.

The guides for top, right, bottom, and left in the margin are not consistent in one class, but are divided into two types of guides, and the top and left guides belong to one class, and the right and bottom guides belong to another class. So what exactly are they referring to? Top takes a vertical downward shift of the reference line below the content of the containing block or the bottom of the connected element margin vertically above; left with containing The content on the left side of the block, or horizontally to the right of the margin, is the reference line horizontally to the right. Right shifts the guide horizontally to the right with the border on the right-hand side of the element itself; bottom vertically downward with the border below the element itself. From above we can see that top and left are outside elements for reference, while right and bottom are references to this element. The displacement direction above refers to the case where the value of the margin is positive and the displacement is in the opposite direction if it is negative.

Perhaps the theory sounds boring, and we illustrate:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
div {width:200px; height:200px; background: #ccc;}
</style>

<body>
<div> the Margin-width value types for the outer margin are: auto | Length | Percentage</div>
</body>

As the code, very simple, for the convenience of us to see the effect, we have set the div width and height and background color.

Now we add margin attributes to the Div's style, such as:

margin:-10px 20px-30px 40px;

What is margin's analytic logic at this time? First of all, we want to understand the relationship between div and the surrounding elements, Div is not connected elements, and at this time div containing block is the body generated block box. According to the guidelines described above, the left margin of the Div is containing block content to the left of the reference line, and at this time to the body of the content left as a guide to the horizontal to the right displacement, displacement of 40px, the same, The top margin takes a vertical upward displacement of the reference line as the body's content is 10px (negative and positive), and the bottom margin follows the borer of the div below it (at this point the DIV has been shifted over by the top margin) vertically up to 30px (at this point, Margin will not change the physical size of box border, but it will change the logical size of box, that is, the elements referenced below the box's margin are not starting from the physical location of the box, but starting from the logical position. Right margin in accordance with now Div borer right (at this time the div has been shifted through the left margin) horizontally to the right 20px. Maybe a friend asks you how the order of analysis is different from the order in which the margin expression appears? If analyzed in order of the margin expression, the result is the same, just to better facilitate the understanding of the people and not in accordance with the order of expression analysis.

With margin the final actual display size is how, perhaps a friend is also more puzzled, I temporarily use logical size and physical size to distinguish (in fact, this concept has been used above), what is the logical size, what is the physical size?! You can look at the picture, the physical size refers to the removal of margin, which contains the box size within border, and the logical size is the size of the box through margin parsing rules (which may explain why IE5 will parse the box model incorrectly). In the above illustration, Box's actual display width equals box's logical size, and box's actual display height equals box's physical size, which shows that box's actual size may be the box's logical size, or box's physical size, and what the rules really are-

The actual size of box =box the physical size + positive margin

This is only valid for the element itself, and for the related elements behind it, they are only laid out in the margin logical size.

Have a friend reaction, hear very confused, the more see the more do not understand, if you are not interested in the specific process of understanding, then remember the following I concluded the conclusion on it, XD

conclusion :The final display size of box is equal to the size of box border and border plus positive margin value. The negative margin value does not affect the actual size of the box, and if the negative top or left values cause box to move up or down, if bottom or right affects only the guides shown in box below.