Home > Article > Web Front-end > HTML CSS--Learning about margin and padding_html/css_WEB-ITnose
HTML CSS--Learning about margin and padding_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:51940browse
http://www.cnblogs.com/fengyv/p/3789333.html
你在学习margin和padding的时候是不是懵了，??什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
- test1
- test2_son
Figure 01
Description : The gray area in Figure 01 is the border of the div with the class value test2, which has width;
①. Margin: The margin refers to the margin element (here is the class value test2 div) The border extension is from the border extension of another element (if another element is at the same level as the margin element (here is a div with class value test1)) or intension (if The other element is the distance from the parent of the margin element, as shown in the picture above;
②. Padding: The padding refers to the border extension of the margin element (here is a div with class value test2) The distance from the extension of the border of its sub-element, as shown in the picture above;
③. Padding and margins are for the element it acts on and other elements. The padding of an element is within the margin of another element. It seems that the element may have a margin. For example: the inner margin of a div with a class value of test2 appears to be a margin for a div element with a class value of test2_test, so the above code can also be written like this: replace class Remove "padding-top:40px;" from the div style list with the value test2, and add "margin-top:40px;" to the div element with the class value test2_test?? This effect is the same as code 2-1 are the same;
3. Attribute values of margin and padding
① Their default values are all 0; their attribute values can be auto?? Margin elements can be browsed by The browser calculates the outer margin, and the padding element calculates the inner margin by the browser; both can inherit the parent element's margin by setting the attribute value to inherit??margin inherits the parent element's outer margin, and padding inherits the parent element's inner margin, but Since inherit is not supported in any version of Internet Explorer (including IE8), there is no need to learn it.
②. Margin allows specifying negative margin values, but be careful when using them; padding does not allow negative margin values to be specified;
③. Both margin and padding attribute values can have 1 , 2, 3 and 4:
a. Margin has 4 attribute values (for example, margin:10px 5px 15px 20px;), which means: top margin 10px, right margin 5px, The bottom margin is 15px, the left margin is 20px; Padding 15px, left padding 20px;
Summary: Whether it is margin or padding, if there are 4 attribute values, then their direction of action clockwise is up, right, down, and left;
b. Margin has 3 attribute values (for example, margin:10px 5px 15px;), which means: top margin 10px, right and left margins 5px, bottom margin 15px;
Padding has 3 attribute values (for example padding: 10px 5px 15px;), its meaning is: upper inner border 10px, right inner distance and left interior spacing 5px, lower inner margin 15px; > Summary: Whether it is Margin or Padding, if there are 3 attribute values, their direction direction is clockwise upper, right left, down; 5px;), its meaning is: 10px of the upper and outer border and outer border, 5px of the right external side and left outer side spacing; : Top padding and bottom padding 10px, right padding and left padding 5px;The hour hand is up and down, right and left in order; attribute value (such as padding:10px;), the meaning is: 4 inner margins are all 10px; The values are all equal
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
- test1
- test2_son
Figure 01
Description : The gray area in Figure 01 is the border of the div with the class value test2, which has width;
①. Margin: The margin refers to the margin element (here is the class value test2 div) The border extension is from the border extension of another element (if another element is at the same level as the margin element (here is a div with class value test1)) or intension (if The other element is the distance from the parent of the margin element, as shown in the picture above;
②. Padding: The padding refers to the border extension of the margin element (here is a div with class value test2) The distance from the extension of the border of its sub-element, as shown in the picture above;
③. Padding and margins are for the element it acts on and other elements. The padding of an element is within the margin of another element. It seems that the element may have a margin. For example: the inner margin of a div with a class value of test2 appears to be a margin for a div element with a class value of test2_test, so the above code can also be written like this: replace class Remove "padding-top:40px;" from the div style list with the value test2, and add "margin-top:40px;" to the div element with the class value test2_test?? This effect is the same as code 2-1 are the same;
3. Attribute values of margin and padding
① Their default values are all 0; their attribute values can be auto?? Margin elements can be browsed by The browser calculates the outer margin, and the padding element calculates the inner margin by the browser; both can inherit the parent element's margin by setting the attribute value to inherit??margin inherits the parent element's outer margin, and padding inherits the parent element's inner margin, but Since inherit is not supported in any version of Internet Explorer (including IE8), there is no need to learn it.
②. Margin allows specifying negative margin values, but be careful when using them; padding does not allow negative margin values to be specified;
③. Both margin and padding attribute values can have 1 , 2, 3 and 4:
a. Margin has 4 attribute values (for example, margin:10px 5px 15px 20px;), which means: top margin 10px, right margin 5px, The bottom margin is 15px, the left margin is 20px; The inner side distance is 15px, and the left inner border is 20px;
Summary: whether it is Margin or padding, if there are 4 attribute values, their direction direction is clockwise in turn, right, down, left;
b. Margin has 3 attribute values (for example, margin:10px 5px 15px;), which means: top margin 10px, right and left margins 5px, bottom margin 15px;
Padding has 3 attribute values (for example padding: 10px 5px 15px;), its meaning is: upper inner border 10px, right inner distance and left interior spacing 5px, lower inner margin 15px; > Summary: Whether it is Margin or Padding, if there are 3 attribute values, their direction direction is clockwise upper, right left, down; 5px;), its meaning is: 10px of the upper and outer border and outer border, 5px of the right external side and left outer side spacing; : Top padding and bottom padding 10px, right padding and left padding 5px;Summary: Whether it is margin or padding, if there are two attribute values, then their directions of action are in the same direction The hour hand is up and down, right and left in order; attribute value (such as padding:10px;), the meaning is: 4 inner margins are all 10px; The values are all equal