html 盒子模型 margin的叠加

1）水平方向margin的叠加

这里设置display:inline-block保证两个p标题在同一行。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" >
    <title>html 盒子模型 例5 | 关关教程</title>
</head>

<body style="margin: 0;">
    <p style="display: inline-block;margin:0;border:2px solid #f00;margin-right: 50px;">关关教程</p>
    <p style="display: inline-block;margin:0;border:2px solid #f00;margin-left: 100px;">关关教程</p>
     
</body>

</html>

第1个p标签的右外边距是50，第2个p标签的左外边距是100px。则两者之间的距离约为150px。说明水平方向两者的margin叠加是直接相加的。

注：为什么是约150px？因为代码中两个标签换行导致会显示一个空隔。

2）垂直方向margin的叠加

取消display属性的设置，段落p具有换行效果，方便我们测试垂直方向设置margin的场景。

<p style="margin:0;border:2px solid #f00;margin-bottom: 50px;">关关教程</p>
<p style="margin:0;border:2px solid #f00;margin-top: 100px;">关关教程</p>

通过QQ截图工具测试两者之间的垂直距离为100px；

也就是默认情况下（position属性为static时），垂直方向的叠加是进行合并，即取两者的较大值。

其它场景

其它场景下，垂直方向的叠加可能是两者相加，视情况而定，大多数情况是相加。

❮上一节 padding设置不同个数的值下一节 span设置宽度与高度无效❯

第03章 html 盒子模型

html 盒子模型 margin的叠加

html教程