内外边距

内外边距

  我一直在强调盒子的概念模型，现在我们具体看看盒子的组成

  可见盒子是由内容+内边距(padding)+边框border组成的。所以盒子的宽度等于width + padding-left + padding-right + border-left + border-right。其中padding-left(right)是左(右)内距的大小，border-left(right)是左(右)边框的粗细。盒子的高度也是相似的计算。

  用来设置内边距的属性是padding,padding取不同个数的值有不同的意思，如下

取值个数	效果
1个，如padding: 10px	设置上下左右边距都为10px
2个，如padding: 10px 20px	设置上下边距为10px,左右边距为20px
3个，如padding: 10px 15px 20px	设置上边距为10px,左右边距为15px,下边距为20px
4个，如padding: 5px 10px 15px 20px	设置上边距为5px,右10px,下15px,左20px

除了可以连写外，还可以使用padding-top,padding-bottom,padding-left,padding-right分别设置内边距的大小。如

padding-left: 20px;
padding-top: 10px;

  对于padding比较需要注意的是，padding的大小也会计入盒子的大小，所以当使用padding时，为了保持盒子的大小不变，需要重新设置一下盒子的width和height。

  至于外边距，就是盒子与盒子之间的距离，使用margin进行设置，它的用法和padiing是一样的，所以这里就不再重复。

  这里要重点介绍一下如何使得盒子水平居中，假设我们有下面的盒子

div {
    width: 300px;
    height: 200px;
    background-color: skyblue;
}

这个盒子是没有水平居中的，那么设置水平居中的方法是设置左右外边距为auto,如下

margin: 0 auto; /*设置上下为0 左右为auto*/

盒子已经水平居中了。

  对于外边距，还有两个需要注意的问题，第一，在垂直方向上，两个盒子的外边距会合并，比如设置一个盒子的外边距为10px,另一个的外边距为100px,那么在垂直方向上，两个盒子的外边距不是110px,而是100px,以最大的为准。但是在水平方向上，两个盒子的外边距为不会合并。

  第二个就是外边距塌陷，为了讲清楚，来演示一下，假设一个大盒子套着一个小盒子，小盒子紧贴着大盒子，如下

.father {
    width: 400px;
    height: 400px;
    background-color: blue;
}
.son {
    width: 100px;
    height: 100px;
    background-color: red;
}

  现在设置小盒子的上外边距为100px,按道理小盒子应该会向下移，距离大盒子的顶部有100px的距离，但是实际上

  小盒子并没有里大盒子的顶部有100px的距离，反而使得大盒子也下来了，这种现象叫做外边距塌陷，解决方法有两个，第一个，给大盒子设置边框，为了边框不影响效果，我把边框的颜色设置为大盒子的颜色相同，这样就看不出设置了边框，如下

border: 1px solid blue;

  这个时候我们看到只有小盒子下来了100px。

  第二种办法就是设置大盒子overflow: hidden,如下

overflow: hidden;

我们刷新发现没有变化，说明这种方法是可以的