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 when reading other people's code, do not understand errors or, if you have never seen this, just guess the author's thoughts.
Note: negative values are allowed.
Example 1
Margin: 10px 5px 15px 20px; top margin: 10px
The right margin is 5px.
The bottom margin is 15px.
The left margin is 20px.
Example 2
Margin: 10px 5px 15px; top margin: 10px
The right margin and left margin are 5 px
The bottom margin is 15px.
Example 3
Margin: 10px 5px; top margin and bottom margin are 10px
The right margin and left margin are 5 px
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:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> vertical margin merge </title>
<Style>
. Top {width: 160px; height: 50px; background: # ccf ;}
. Middle {width: 160px; background: # cfc ;}
. Middle. firstChild {margin-top: 20px ;}
</Style>
</Head>
<Body>
<Div class = "top"> </div>
<Div class = "middle">
<Div class = "firstChild"> I just want to separate the vertex distance from my parent element. </Div>
<Div class = "secondChild"> </div>
</Div>
</Body>
</Html>
Do you feel like this is normal in IE? Why is an exception displayed in firefox that is highly compatible with css tutorial 2 ?? 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;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
