逆战班学生教你认识外边距margin和内边距padding的特点

1、盒子详解

内容区]内边距区（padding）]边框（border）]外边距区（margin），如下图：

2、内边距padding

padding:控制子元素在父元素里面的位置关系[调整值是加在父元素上的]

padding特点：
<1>padding的值可以将盒子撑大。
解决方案：将盒子的长宽在原有基础上减去padding的值

<2>可以给单一方向设置padding值：padding-left/right/top/bottom:数值px;

<3>pandding后数值只有一个时：表示上下左右间距都为该数值
pandding后数值有2个时：前面数值表示上下间距，后面数值表示左右间距
pandding后数值有3个时：前一个数值表示上面的间距，中间数值表示左右数值，最后一个数值表示下面的间距
pandding后数值有4个时：从左到右依次为上面的间距、右边的间距、下面的间距、左边的间距

<4>padding不能被设置为负数！！

<5>padding不会对背景图产生影响，因为背景图是不占空间的

<6>当元素的盒子未定义宽高时，padding将盒子撑开，此时不需要在原有基础上减去padding的值

3、外边距margin

margin:控制同级元素之间的位置关系[调整值是加在子元素上的]

margin特点：
<1>margin的值不会对盒子本身的宽高产生影响。

<2>可以给单一方向设置margin值：margin-left/right/top/bottom:数值px;

<3> margin后数值只有一个时：表示上下左右外间距都为该数值
margin后数值有2个时：前面数值表示上下外间距，后面数值表示左右外间距
margin后数值有3个时：前一个数值表示上面的外间距，中间数值表示左右的外间距，最后一个数值表示下面的外间距
margin后数值有4个时：从左到右依次为上面的外间距、右边的外间距、下面的外间距、左边的外间距

<4>margin可以被设置为负数！！

<5>当给margin设置：
margin:0 auto；
可以让当前元素在父元素中水平居中。

margin常见bug：
<1>父元素和子元素都没有浮动时，当第一个子元素设置margin-top值时，默认会将父元素一起设置margin-top值

<2>上下相邻的两个元素之间的margin值，不会叠加，结果是按照最大值去设置