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

This article is to share with you about the features of margin 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.

What is Margin?

The CSS margin attribute defines the space around the element. You can set the top, right, bottom, and left margins by using separate properties. You can also use the abbreviated outer margin attribute to change all outer margins at the same time. -- W3School

Boundary, extra white space is generated around the element. "blank space" usually refers to the area where other elements cannot appear and the background of the parent element is visible. -- authoritative Guide to CSS

I prefer to use the word "outer margin" to explain margin (similarly, padding can be called "inner margin", but I just like to call padding "blank" or "blank"), we can clearly understand that the most basic use of margin is to control the space around elements, from a visual point of view to achieve the purpose of separating each other.

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:

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

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

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

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):

The code is as follows:

Vertical margin merge

.top {width:160px; height:50px; background:#ccf;}

.middle {width:160px; background:#cfc;}

.middle .firstChild {margin-top:20px;}

I really just want to distance myself from my father.

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.

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 to use padding 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.

The difference of margin in Block elements and inline elements

There are two basic elements in HTML (the html standard here, not xhtml), namely block and inline. As the name implies, the block element is the element represented as "block" (block-like elements), and the inline element is the element represented as "row" (character level elements and text strings). The main difference between the two is that the block element starts with a separate line and has a separate line in the page document. The inline element resides on one line with other inline elements.

Block elements (block elements) are roughly: P | H1 | H2 | H3 | H4 | H6 | UL | OL | PRE | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | FIELDSET | ADDRESS (with the advance of the html5 standard, some elements will be abolished, while some new elements will be introduced.) Note that not all block elements have the default display attribute block, and display:table elements like table are also block elements.

Inline elements (inline elements) are roughly # PCDATA (text) | TT | I | B | BIG | SMALL | EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM | A | IMG | OBJECT | BR | SCRIPT | Q | SUB | SUP | SPAN | BDO | INPUT SELECT | TEXTAREA | LABEL | BUTTON

There are special elements such as img | input | select | textarea | button | label, which are called replaceable elements (Replaced element). What distinguishes them from general inline elements (relatively speaking, called non-replaced element) is that these elements have internal dimensions (intrinsic dimensions), and they can set the width/height attribute. Their properties are the same as those of the elements that set display:inline-block.

Maybe some friends are a little confused about non-permutation elements (non-replaced element) 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 (replaced element), that is to say, when we understand the meaning of permutation elements, we understand non-permutation elements. Replacement element is defined in W3C: "An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet"

We can understand from the definition that replacement elements (replaced element) mainly refer to elements such as img, input, textarea, select, object and so on, which are formatted by CSS by default. Furthermore, it can be known that non-permutation elements (non-replaced element) are elements other than img, input, textarea, select, object and other permutation elements.

Margin in the block-level elements, its performance can be fully reflected, up and down you can set. And keep in mind that the margin of a block-level element is based on the margin distance of the previous element, that is, relative to the previous element. If the element is the first element, it is the margin distance relative to the parent element (but if the first element is relative to the parent element margin-top and the parent element does not set padding-top/border-top, you need to verify the knowledge of vertical margin merging above)

Margin can also be used for inline elements, which is allowed by the specification, but margin-top and margin-bottom have no effect on the height of inline elements (to lines), and because the boundary effect (margin effect) is transparent, it does not have any visual effect.

This is because the boundary does not change the line height of the inline element when it is applied to the inline element. If you want to change the line height of the inline element, that is, the line spacing similar to text, then you can only use these three attributes: line-height,fong-size,vertical-align. Remember, it is line-height, not height, that affects the height of inline elements, because inline elements are line by line, so if you set a height, is this the height of the entire inline element? Or is it the height of a row of inline elements? I don't know, so Unification sets a height for each row, and it can only be line-height.

Margin-top/margin-bottom doesn't have much practical effect on inline elements, but margin-left/margin-right can still have an impact on inline elements. If the css on the left is written on the inline element, its effect is roughly that there is no effect up and down. The distance between the left and its adjacent elements or text is 40px, and the distance between the right and its adjacent elements or text is 20px. You can try it yourself.

Finally, among the inline elements are the non-replaceable inline elements (non-replaced element) mentioned above. These elements img | input | select | textarea | button | label is an inline element, but margin can still affect his upper and lower levels!

To sum up, the margin attribute can be applied to almost all elements, except for elements of table display type (excluding table-caption, table and inline-table), and vertical margins have no effect on non-permutable inline elements (non-replaced inline element).

Negative margin Technology and its Application

In all the practical applications of margin, negative margin technology is one of the most important lessons on my way to learn css. Many advanced applications and problems on the page can be realized by negative margin technology. Margin technology is so useful that I don't want to muddle through because of the limited space, so I decided to write an article specifically for him, explaining in detail his effect, principle, and application. Before that, you can read the article about margin attributes written by Luo Fei to get a general idea of the concept of "margin guide", and then check out this article on negative margin technology and its application.

Bug that appears in margin under common browsers

I have written so much, and finally summarize some common margin Bug in browsers. If you encounter layout problems under margin, you can check here to find solutions. If you find other Bug about margin under the browser, you can post a message. After checking and adopting it, I will add it in time. Thank you for sharing.

Bilateral distance Bug in IE6:

Occurrence: margin doubles when margin-left (element float:left) or margin-right (element float:right) is set for the first floating element in the parent element.

The solution: add a display:inline;CSS attribute to the floating element, or use padding-left instead of margin-left.

Principle analysis: the default value of the display property for block-level objects is block, which occurs when the float is set and its outer margin is set. You might ask, "Why isn't there a double-margin Bug between the later object and the first object?" Because floats have their own corresponding objects, this problem occurs only with floating objects relative to their parents. The first object is relative to the parent object, and then the object is relative to the first object, so there is no problem with the object after it is set. Why display:inline can solve this double distance bug, first of all, there is no two-sided distance problem of inline element or inline-block element. Then, floating attributes such as float:left can make the inline element haslayout, which will make the inline element behave the same as the inline-block element, supporting height and width, vertical margin and padding, etc., so all the styles of div class can be used on this display inline element.

Floating element 3px interval Bug in IE6:

Where it happens: it happens when an element floats, and then a non-floating element naturally floats up close to the bug of the 3px that will appear.

Solution: the right elements float together, or add IE6 Hack _ margin-left:-3px; to the right elements to eliminate 3px spacing.

Principle analysis: IE6 browser defect Bug.

IE6/7 negative margin Hidden Bug:

Occurrence: when a non-hasLayout element within a parent element with hasLayout is set to a negative margin, the part beyond the parent element is not visible.

Solution: remove the hasLayout; of the parent element or assign hasLayout to the child element and add position:relative

Principle analysis: hasLayout unique to IE6/7 produces problems.

Under IE6/7, the ul/ol tag disappears bug:

Where it happens: when ul/ol triggers haslayout and writes margin-left on ul/ol, the previous default ul/ol tag disappears.

Solution: set margin-left for li instead of margin-left for ul/ol.

Principle analysis: IE6/7 browser Bug

Under IE6/7, margin overlaps with absolute elements bug:

Occurrence: in the double-column adaptive layout, the element absolute on the left is absolutely positioned, and the margin on the right is positioned with stretching distance. The block-level element with the absolute attribute applied on the left overlaps the adaptive text content on the right under IE6/7.

Solution: change the left block-level element to an inline element, such as changing div to span.

Principle analysis: this is because IE6/IE7 browsers render inline horizontal tag elements and block level tag elements without distinction. Belongs to the IE6/7 browser rendering Bug.

Under IE6/7/8, auto margin is centered on bug:

Occurrence: set the block element that margin auto cannot be centered

Solution: the reason for this bug is usually that there is no Doctype, and then trigger the quirks mode of ie, plus the Doctype declaration is fine. The method given in the "Sunflower Book of defeating IE" is to add a width to the block element to solve the problem, but according to my own test, add with this method is invalid, if there is no Doctype, even if you add width to the element, you can not make the block element center.

Principle analysis: missing Doctype declaration.

Input [button | submit] setting under IE8 margin:auto cannot be centered

Where it happens: under ie8, if you set a tag like button (such as button input [type= "button"] input [type= "submit"]) {display: block; margin:0 auto;}, you can't center it if you don't set the width.

Solution: you can add width to the input

Principle analysis: IE8 browser Bug.

IE8 percentage padding Vertical margin bug:

Where it happens: when the parent element has a percentage of padding and the child element has a vertical margin, it is as if the parent element has been set to margin.

Solution: add an overflow:hidden/auto to the parent element.

Principle analysis: IE8 browser Bug.

Thank you for reading! This is the end of this article on "what are the characteristics of margin 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.