CSS盒模型-边距-组团学

一、内边距（padding）

说明

padding属性用于设置内边距，是边框与内容之间的距离，也就是手机盒子里的填充物的厚度。
语法
```
div{
    /*分别设置四个内边距的值*/
    padding-top:10px;/*上内边距*/
	padding-right:10px;/*右内边距*/
	padding-bottom:10px;/*下内边距*/
	padding-left:10px;/*左内边距*/
}
```
除了分别设置四个内边距的值外，还有四种设置Padding属性值的方式：

四个值：上右下左 {padding:10px 20px 30px 40px;}

三个值：上左右下 {padding:10px 20px 30px ;}

二个值：上下左右 {padding:10px 20px ;}

一个值：四个方向 padding:2px;
作用
1. 用来调整子元素（内容）在父元素（容器）中的位置关系。注：padding属性需要添加在父元素上。
2. padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小。
注意
1. padding值不允许是负值！
2. padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域；

二、外边距（margin）

说明

用于设置外边距，设置外边距会在元素与元素之间创建“空白”区域，这段空白区域通常不能放置其他内容。
语法
```
div{
    margin-top:10px;/*上外边距*/
	margin-right:10px;/*右外边距*/
	margin-bottom:10px;/*下外边距*/
	margin-left:10px;/*上外边距*/
	margin:10px;/*上外边距 右外边距 下外边距 左外边*/
}
```
除了可单独设置某一方向填充，也可设置不同数量的值，取值顺序跟内边距相同，有以下4种方式：

四个值：上右下左 {margin:10px 2px 4px 3px ;}

三个值：上左右下 {margin:2px 4px 6px;}

二个值：上下左右 {margin:2px 4px;}

一个值：四个方向 {margin:2px;}

清除元素的默认内外边距

说明

为了更方便地控制网页中的元素，在网页布局时，通常会先清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意

行内元素是只有左右外边距的，没有上下外边距。内边距，在ie6等低版本浏览器也会有问题。因此，尽量不要给行内元素指定上下的内外边距就好了。

外边距实现盒子水平居中

通过设置盒子的外边距，实现其水平居中，须满足两个条件：

必须是块级元素
盒子必须指定了宽度

最后，将其左右外边距都设置为auto即可。

.header{ width:1000px; margin:0 auto;}

PS：经常使用此方式进行网页布局。

外边距调整元素在盒子中位置

说明

利用外边距调整元素在容器中的位置。

用法

div img {  
	width: 200px;/* 插入图片更改大小 width 和 height */
	height: 210px;
	margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
	margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

用途

盒子中插入图片，最多的应用在产品展示中。

外边距合并

margin定义块元素的垂直外边距时，可能会出现两种外边距的合并的情况：相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的合并。

相邻块元素垂直外边距的合并

外边距塌陷

也称为相邻块元素垂直外边距的合并，当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是**两者中的较大者**。

嵌套块元素垂直外边距的合并

说明

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决
1. 为父元素定义1px的上边框或上内边距。
2. 为父元素添加overflow:hidden。