Ridicule from the Web standard margin. Do you know me?

I accidentally saw an article "Don't tell me you know margin" in the blue ideal. I thought it was written. I would like to pay tribute to the author for your help.

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 ?...... (Reference the author's original words)

We need to deal with the margin attribute when writing CSS, and sometimes we need to use margin to fix the bug caused by IE. margin is the margin, which we all know. I defined it as: its specific function is to define the distance within the border of the parent element. The CSS authoritative guide says this: boundary, generating extra blank spaces around elements. "Blank area" usually refers to areas where other elements cannot appear and the parent element background is visible. W3cschool: 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.

You have understood what I call it-margin, followed by margin.

Features of margin(Stealing the author's title)

Margin is transparent. The background color or background image of the parent element is not affected within the range of the value it sets, and can be completely displayed to the user. The margin attribute assigns values to the top, right, bottom, and left of a separate attribute. common values include margin: 10px; or margin: 10px 20px; or margin: 10px 20px 10px 20px; but do you know: margin: 10px 15px 3px? What do you think it means: margin: 10px 15px 3px 0px ?? Let me tell you, error: its expression means margin: 10px 15px 3px 15X; haha! Great. This is correct. In practical applications, or reading othersCodeDo not understand errors or, if you have never seen this, just guess the author's ideas.

Is the vertical margin of margin incompatible with the standard?

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 is "normal", and a "bug" is displayed in a standard browser:

1 < Html Xmlns = "Http://www.w3.org/1999/xhtml" >
2 < Head >
3 < Title > Vertical margin merge </ Title >
4 < Style >
5 . Top { Width : 160px ; Height : 50px ; Background : # CCF ; }
6 . Middle { Width : 160px ; Background : # CFC ; }
7 . Middle. firstchild { Margin-top : 20px ; }
8 </ Style >
9 </ Head >
10  
11 < Body >
12 < Div Class = "TOP" > </ Div >
13 < Div Class = "Middle" >
14 < Div Class = "Firstchild" > In fact, I just want to separate the distance from my parent element. </ Div >
15 < Div Class = "Secondchild" > </ Div >
16 </ Div >
17 </ Body >
18 </ Html >

Do you feel like this is normal in IE? Why is an exception displayed in other Firefox highly compatible with css2 ?? I will tell you that this is because the haslayout rendering of ieie leads to this "Outstanding" appearance. Other standard browsers will show a "problematic" appearance. According to the CSS specification, ie is incorrect, while mainstream browsers such as firffox, chrome, opera, and sarfi are parsed to comply with CSS specifications.

For example, if the margin-top of the first child element of the parent element cannot be reached, a valid border or padding is displayed. it will constantly find the trouble of "Leader" (parent element, ancestor element. You only need to set a valid border or padding for the leader to effectively control the unleader margin to prevent it from going beyond the hierarchy and passing on the sacred intent, execute your own margin as the lead margin (although its value is greater than that of "Zhenlong ).

Use margin or padding

Many people have asked me why padding and margin should be used separately. They have little difference and the effect is not bad. Why are they two definitions? Many people may be confused, especially new users, who usually ask me this question.

Next, let's take a look at the difference between padding and margin:

When we want to use the background in the child element, but the parent element does not adapt to the background, we need to use padding when the image is "pinned" and the text is "not pinned" for a distance;

When we allow the child element border to pin the parent element and overwrite the background image or background color of the parent element, we use padding;

When we want to make the child element a little away from the parent element, but it does not affect the display of the background image of the parent element, we use margin;

When child elements have borders and parent elements have no borders, use margin to generate distance;

The same is true of margin in inline elements. The above is my understanding of the attributes of margin, and I will not elaborate on the bug of margin here, because there are already many people of insight on the internet, listing the bug of margin in detail. Wish you a happy Dragon Boat Festival!

(Like to learn and want to discuss with me a variety of Web Knowledge left your mailbox or contact information, or with me mail 747850255@qq.com reprint Please consciously attach reprinted address, from the blog Park "Opening Audi next year ")