padding(内边距)、margin(外边距)、border(边框)

淩亂°似流年 2021-10-26 14:50 578阅读 0赞

1、所有的 HTML 元素本质上是小的矩形块，代表着某一小块区域。有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

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

1405270-20190819203539166-1872709527.png

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

我们可以看到上图绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

2、元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。在下图，我们可以看到绿方块和红方块都位于黄方块之中，注意红方块比绿方块具有更大的外边距 margin，使得它看起来更小。当你增大绿方块的 margin 时，将会增加元素边框和元素实际所占空间之间的距离。

1405270-20190819204316221-2049378511.png

3、元素的 margin 控制元素的 border 和元素实际所占空间的距离。将一个元素的 margin 设置为负值，元素将会变大。具体可以看看红方块的 margin 值。

1405270-20190819205238678-27474300.png

转载于:https://www.cnblogs.com/selenaf/p/11379817.html

发表评论

表情：
评论列表 （有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读