Home > Developer > JavaScript
Html css -- learning of margin and padding, marginpadding
Http://www.cnblogs.com/fengyv/p/3789333.html when you are learning margin and padding is not done, -- what his mother's padding, what his mother's margin. Haha, I didn't understand it at first, but I finally understood it through data query. Now I will talk about my understanding of margin and padding:
I. What are margins?
The margin in CSS refers to the distance (or space) between the current element border and other surrounding elements border ).
2. What is the padding and what is the margin?
Code 2-1:
Note: In Figure 01, the gray area is the border of the div whose class value is test2. It has a width;
①. Margin: the margin refers to the elements used by margin (here, the class value is test.2(If the other element is the same as the element used by margin, the class value is test .)1(Div) or inner (if another element is the parent level of the element to which margin is applied), such;
②. Padding: the padding refers to the extension distance between the border of the margin element (the div with the class value test2) and the border of its child element, for example;
③ The internal and external margins are used for the elements and other elements. The internal margins of an element may appear in the eyes of another element, for example: the class value is test.2The inner margin of the div seems to be the outer margin when the class value is test2_test div, so the code above can also write as follows: Set the class value to test2In the div style list of, remove "padding-top: 40px;" and add "margin-top: 40px" to the class value test2_test div element; "-- the effect is the same as that of Code 2-1;
3. Attributes of margin and padding
① Their default values are all 0; their attribute values can be used to calculate the outer margin for the auto -- margin element, and the padding for the padding element is calculated by the browser; you can inherit the margin of the parent element by setting the property value to inherit -- margin inherits the margin of the parent element, and padding inherits the padding of the parent element, however, because inherit is not supported in any version of Internet Explorer (including IE8), it is unnecessary to learn.
②. Margin allows you to specify a negative margin value, but be careful when using it. padding does not allow you to specify a negative margin value;
③ Attributes of margin and padding can have one, two, three, and four attributes:
A. margin has four attribute values (for example, margin: 10px 5px 15px 20px;). The values are: Top margin: 10px, right margin: 5px, bottom margin: 15px, and left margin: 20px;
Padding has four attribute values (for example, padding: 10px 5px 15px 20px;). It indicates that the top margin is 10px, the right margin is 5px, the bottom margin is 15px, and the left margin is 20px;
Conclusion: whether it is margin or padding, if there are four attribute values, their direction is clockwise, top, right, bottom, left;
B. margin has three attribute values (for example, margin: 10px 5px 15px;). The values include: Top margin 10px, right margin and left margin 5px, and bottom margin 15px;
Padding has three attribute values (for example, padding: 10px 5px 15px;), which indicate: Top margin: 10px, right margin, left margin: 5px, and bottom margin: 15px;
Conclusion: whether it is margin or padding, if there are three attribute values, their direction is clockwise, top right left, bottom;
C. margin has two attribute values (for example, margin: 10px 5px;), which indicate: Top margin and bottom margin 10px, right margin and left margin 5px;
Padding has two attribute values (for example, padding: 10px 5px;). It indicates that the top and bottom margins are 10px, the right and left margins are 5px;
Conclusion: whether it is margin or padding, if there are two attribute values, their direction is clockwise up and down, right left;
D. margin has one attribute value (for example, margin: 10px;), which means that the four margins are 10px;
Padding has one attribute value (for example, padding: 10px;), which means that the four padding values are 10px;
Conclusion: whether it is margin or padding, if one attribute value exists, their margins are equal.
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
