1、所有的 HTML 元素本质上是小的矩形块,代表着某一小块区域。有三个影响HTML元素布局的重要属性:padding(内边距)
、margin(外边距)
、border(边框)
。
元素的 padding
控制元素内容 content
和元素边框 border
之间的距离。
元素的 padding
控制元素内容 content
和元素边框 border
之间的距离。
我们可以看到上图绿方块和红方块都位于黄方块之中,但是红方块比绿方块具有更大的 padding
。当你加大绿方块的 padding
, 它将扩大元素内容和元素边框的距离。
2、元素的外边距 margin
控制元素边框 border
和元素实际所占空间的距离。在下图,我们可以看到绿方块和红方块都位于黄方块之中,注意红方块比绿方块具有更大的外边距 margin
,使得它看起来更小。当你增大绿方块的 margin
时,将会增加元素边框和元素实际所占空间之间的距离。
3、元素的 margin
控制元素的 border
和元素实际所占空间的距离。将一个元素的 margin
设置为负值,元素将会变大。具体可以看看红方块的 margin
值。