【前端】盒子padding、margin、border精讲（起点闭关计划）

首先对于padding、margin、border有一个简单地认识。

这里我们把盒子进行一个比喻：一个有着泡泡安全纸包围着的快递。

margin：是一个盒子最外面的东西，我们可以把它理解成是快递最外面的安全纸，它是有厚度的，因此两个盒子之间的距离，就是由两个盒子的最外层的margin决定的。主要作用于盒子与盒子之间的距离。

border：是一个盒子的边框，边框的厚度将会影响内部的储存空间，毕竟盒子越厚的话，内部储存空间就会越来越少。

padding：这个盒子属性是最接近内容的属性。我们可以把它理解为盒子内部的拉菲草，他包裹着内容，padding的厚度也会影响内部的储存空间，盒子内部大小固定的话，拉菲草越多，内部储存空间就会越少。可以用来盒子内部的内容的定位，是偏左还是偏右，亦或是左上，右下

图示：

小结：

设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框	border-bottom-style:样式;border- bottom-width: