Do you fully understand the margin attributes?

Source: Internet
Author: User

When writing CSS, you have to deal with margin. Do you really know margin? Do you know what features margin has? Do you know what vertical margin merge is? What is the difference between margin in block and inline elements? When should I use padding instead of margin? Do you know the negative margin? Do you know the purpose of negative margin in actual work? What are the common bugs of margin in browsers ?......

What is margin?

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

Boundary. An extra blank area is generated around the element. "Blank area" usually refers to areas where other elements cannot appear and the parent element background is visible. -- CSS authoritative guide

I prefer to use the word "margin" to explain margin (similarly, padding can be called "padding", but I also like to call padding "padding" or "white-out "), we can clearly understand that the most basic purpose of margin is to control the space intervals around elements and achieve mutual separation visually. Jiayu County Technical School

Features of margin

Margin is always transparent. By using a separate attribute, margin can set the margin on the top, right, bottom, and left. That is, margin-top, margin-right, margin-bottom, and margin-left.

The value types of margin-width include: auto | length | percentage. You can also use the abbreviated margin property to change all the margins at the same time: margin: Top right bottom left; (eg: margin: 10px 20px 30px 40px) the memory mode is the "upper right bottom left" clockwise around the element.

The formula also provides the omitted numeric Statement, which is basically as follows:

  1. If margin has only one value, the upper right and lower left margin are the same. For example, margin: 10px; is equal to margin: 10px 10px 10px;
  2. If margin has only two values, the first value indicates the upper and lower margin values, and the second value indicates the left and right margin values. For example: margin: 10px 20px; it is equal to margin: 10px 20px 10px 20px;
  3. If margin has three values, the first value indicates the upper margin value, the second value indicates the left and right margin values, and the third value indicates the lower margin value. For example: margin: 10px 20px 30px; it is equal to margin: 10px 20px 30px 20px;
  4. If margin has four values, the four values correspond to the top-right-bottom-left values respectively. Example: margin: 10px 20px 30px 40px;

In practical applications, we do not recommend using three values of margin. One is mistaken, and the other is not easy to modify in the future. If it is written as margin at the beginning: 10px 20px 30px; in the future, the requirement will be changed to above 10px, right 30px, lower 30px, and left 20px. You still have to split this margin into margin: 10px 30px 20px; laborious and thankless, for example, you can write margin: 10px, 20px, 30px, and 20px in the beginning. In reality, do not increase the development cost in the future to save two bytes.

Vertical margin merge

Don't be intimidated by the above term. Simply put, the outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins. You can view the w3shool CSS margin merge to learn about this basic knowledge.

In practice, the vertical margin merge problem is common in the margin-top of the first child element. The spacing between the parent element and the parent element is exceeded, in addition, it only produces problems in standard browsers (firffox, chrome, opera, and sarfi), while ie performs well. For example, you can view the following code (ie shows "normal", and a "bug" appears in a standard browser "):

<HTML xmlns = "http://www.w3.org/1999/xhtml"> 

According to the CSS specification, the "good performance" of IE is actually an incorrect performance, because the haslayout rendering of IE leads to the "good performance" appearance. Other standard browsers will show a "problematic" appearance. Well, if you have read the above w3shcool CSS margin merge article, it will be easy to discuss this issue. The cause of this problem is that, according to the specification, if a box is not filled with padding-top or border-top ), the top margin of the box overlaps with the top margin of the first child element in its internal document stream.

In addition, the white point is: if the top margin of the first child element of the parent element is margin-top, a valid border or padding will not be reached. it will constantly find the trouble of "Leader" (parent element, ancestor element. As long as a valid border or padding is set for the leader, the unleader margin can be effectively controlled to prevent it from going beyond the hierarchy, fake the sacred intent, and execute its own margin as the leader's margin.

As explained above, adding a border-top or padding-top to the middle element in the parent element example can solve this problem.

Generally speaking, this problem is explained here, and most articles will not go into depth, but as a practical developer, the most important thing is to know why, the original use of margin-top is to separate the distance from the parent element. According to your solution, it is actually a "repair ", to "fix" the CSS standard bug of parent-child vertical margin merge, and force border-top and padding-top on the parent element, it is uncomfortable, it's hard to remember that this rule will still be forgotten next time, and if you do not need border-top to add an upper border in the page design draft, this addition will make you feel better, this vulnerability may cause future changes.

Use margin or padding

When to use margin: when adding a blank space outside border is required. When no background (color) is required in the blank area. The gap between the two upper and lower boxes needs to be offset. For example, the margin of 15px + 20px will be blank with 20px.

When should padding be used at that time: When the blank space needs to be added in the border internal test. When the blank area requires background (color. The gap between the two boxes that are connected up and down is expected to be equal to the time between the two. For example, the padding of 15px + 20px will get a blank space of 35px.

In my opinion, margin is used to separate the spacing between elements and elements, and padding is used to separate the spacing between elements and content. Margin is used to separate elements so that elements and elements are irrelevant. Padding is used to separate elements from the content, so that there is a "breathing distance" between the content (text) and (Package) elements ".

Differences between margin in block and inline Elements

HTML (HTML standard, not XHTML) contains two basic elements: block and inline. As the name suggests, a block element is a block-like elements element, and an inline element is a character level elements and text strings element ). The main difference between the two is that the block element in the page document starts from another line and excludes one line. The Inline element is the same as other inline elements.

Block elements include: p | H1 | H2 | H3 | H4 | H5 | H6 | ul | ol | pre | DL | Div | NoScript | BLOCKQUOTE | form | HR | table | fieldset | Address (with HTML5 standard advancement, some elements will be abolished, and some new elements will be introduced. Note that not all the default display attributes of block elements are blocks, such as the display of table: the table element is also a block element.

Inline elements (Inline elements) include: # pcdata (text) | TT | I | B | big | small | em | strong | dfn | code | SAMP | KBD | Var | cite | abbr | acronym | A | IMG | object | BR | script | map | q | sub | sup | span | BDO | input | select | textarea | label | button

There are special elements such as IMG | input | select | textarea | button | label. They are called replaceable elements ). The difference between General inline elements (relatively non-replaced elements) 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 display: inline-block element.

Some may be confused about the non-replaced element. Non-replacement elements are not clearly defined in W3C, but we can literally understand that non-replacement elements correspond to replaced elements ), that is to say, if we understand the meaning of the replacement element, we can understand the non-replacement element. Replacement element, which is defined in W3C: "an element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet"

From the definition, we can understand that replaced elements mainly refer to elements such as IMG, input, textarea, select, and object which have CSS to format the appearance range by default. We can see that non-replaced elements are not only replacement elements such as IMG, input, textarea, select, and object.

In the block-level element, the performance of margin can be fully reflected, and you can set it up or down. Remember that the reference of the margin of block-level elements is that the previous element has a margin distance from its original element. If the element is the first element, the distance is relative to the margin of the parent element (but the first element is relative to the parent element margin-top, and the parent element is not set to padding-top/border-top, you need to confirm the vertical outer margin merging knowledge)

Margin can also be used for inline elements, which is allowed by the specifications. However, margin-top and margin-bottom have no effect on the height of inline elements (rows) and because of the boundary effect (margin effect) it is transparent and has no visual impact.

This is because the boundary does not change the Row Height of an inline element when it is applied to an inline element. If you want to change the Row Height of an inline element, that is, line spacing similar to text, you can only use these three attributes: line-height, Fong-size, vertical-align. Remember, line-height rather than height affects the height of inline elements. Because an inline element is a row and a height is determined, is this the height of the entire inline element? Or is the height of a line in the inline element? This is not true. Therefore, the height of each line can only be line-height.

Margin-top/margin-bottom does not have much practical effect on inline elements, but margin-left/margin-right can still affect inline elements. Apply margin: 10px 20px 30px 40px. If the CSS on the left is written on the inline element, the effect is roughly that the upper and lower have no effect, and the distance from the adjacent element or text on the left is 40px, the distance from the adjacent element or text on the right side is 20px. You can try it on your own.

Finally, the inline element (non-replaced element) we mentioned above is included in the consortium element. These elements are IMG | input | select | textarea | button | label although they are inline elements, however, margin can still affect the upper, lower, and lower sides of the video!

In summary, 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, in addition, the vertical margin does not work for non-replaced inline elements.

Negative margin Technology and Its Application

Among all the practical applications of margin, the negative margin technology is one of the most important lessons I have learned about CSS. Many advanced applications and difficult cases on the page can be achieved using the negative margin technology. The margin technology is so useful. I don't want to worry about it for a long time, so I decided to write an article specifically for him to explain in detail his effects, principles, and applications. Before that, you can read the article about the attributes of margin written by Feifei from the ground up, get a general idea of the concept of "margin reference line", and then read the article about the negative margin technology and its application.

Common bug of margin in browsers

I have written so much about it. I will summarize some common margin bugs in browsers. If you encounter layout problems in margin, you can find the solution here, if you find other bugs related to margin in the browser, you can leave a message. I will add the bug in time after checking and adopting it. Thank you for sharing it.

Double margin bug in IE6:

  • Occurrence: when the first floating element in the parent element is set to margin-left (element float: Left) or margin-Right (element float: right), margin doubles.
  • Solution: add the display: inline; CSS attribute to the floating element, or use padding-left instead of margin-left.
  • Principle Analysis: the default value of the display attribute of a block-level object is block. When floating is set, this situation occurs when its outer margin is set. Maybe you will ask: "Why is there no double margin bug between the subsequent object and the first object "? Because float has its own corresponding objects, this problem occurs only when the floating object is relative to its parent object. The first object is relative to the parent object, and the subsequent object is relative to the first object. Therefore, after the object is set, no problems will occur. Why does display: inline solve this bilateral margin bug? First, the inline element or inline-block element does not have a bilateral margin problem. Then, float: Left and other floating attributes allow the inline element haslayout to make the inline element behave the same way as the inline-block element. It supports high width, vertical margin, and padding, therefore, all Div class styles can be used on the display inline element.

The floating element 3px interval bug in IE6:

  • Occurrence: A 3px bug occurs when an element floats, and a non-floating element naturally floats closer to it.
  • Solution: the elements on the right are also floating together, or IE6 hack _ margin-left:-3px is added to the elements on the Right To eliminate the 3px spacing.
  • Principle Analysis: IE6 browser defect bug.

IE6/7 negative margin hidden BUG:

  • Occurrence: when a negative margin is set for a non-haslayout element in a parent element with haslayout, the content beyond the parent element is invisible.
  • Solution: remove the haslayout of the parent element, or assign haslayout to the child element and add position: relative;
  • Principle Analysis: haslayout exclusive to IE6/7 has a problem.

In IE6/7, the UL/OL mark disappears. BUG:

  • Occurrence: when UL/OL triggers haslayout and writes margin-left on uL/OL, the default uL/OL mark will disappear.
  • Solution: Set margin-left for Li instead of margin-left for uL/ol.
  • Principle Analysis: IE6/7 browser bug

In IE6/7, the bug of overlap between margin and absolute elements is as follows:

  • Occurrence scenario: in the double-column adaptive layout, the absolute element on the left is absolutely positioned, And the margin on the right is positioned by distance. In IE6/7, the block-level elements with the absolute attribute applied on the left overlap with the adaptive text content on the right.
  • Solution: Change the left-side block-level element to an inline element, for example, change the DIV to a span.
  • Principle Analysis: IE6/IE7 browsers render the inline horizontal label elements and block horizontal label elements without distinction. This is a browser rendering bug in IE6/7.

Auto margin center bug in IE6/7/8:

  • Occurrence: Setting margin auto for block elements cannot be centered
  • Solution: the cause of this bug is usually that there is no doctype, and then the quirks mode of IE is triggered, and the doctype declaration is enough. The method given in "kibana beat ie" is to add a width to the block element, but according to my own test, adding with is invalid, without doctype, even adding width to the element cannot center the block element.
  • Principle Analysis: doctype declaration is missing.

In IE8, the input [Button | submit] setting margin: auto cannot be centered.

  • Scenario: In IE8, if {display: block is set for a tag such as button (such as button input [type = "button"] input [type = "Submit; margin: 0 auto;} cannot be centered if the width is not set.
  • Solution: add the width to the input.
  • Principle Analysis: IE8 browser bug.

IE8 percentage padding vertical margin BUG:

  • Occurrence scenario: when the parent element sets the percentage padding and the child element has vertical margin, it is like the parent element is set with margin.
  • Solution: Add overflow: hidden/auto to the parent element.
  • Principle Analysis: IE8 browser bug.

Do you fully understand the margin attributes?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.