盒子模型

所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的padding控制元素内容content和元素边框border之间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的padding。

当你加大绿方块的padding, 它将扩大元素内容和元素边框的距离。

元素的外边距margin控制元素边框border和元素实际所占空间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，注意红方块比绿方块具有更大的外边距margin，使得它看起来更小。

当你增大绿方块的margin时，将会增加元素边框和元素实际所占空间之间的距离。

元素的margin控制元素的border和元素实际所占空间的距离。如果你将一个元素的margin设置为负值，元素将会变大。

有时你想要自定义元素，使它的每一个边具有不同的padding。CSS 允许你使用padding-top、padding-right、padding-bottom和padding-left来控制元素上右下左四个方向的padding。