关于CSS外边距叠加问题

最新推荐文章于 2022-08-28 00:47:10 发布

放风筝的小小马

最新推荐文章于 2022-08-28 00:47:10 发布

阅读量508

点赞数

分类专栏： HTML+CSS+JScprit

本文链接：https://blog.csdn.net/hexon804/article/details/51172832

版权

HTML+CSS+JScprit 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

听闻HTML+CSS甚是简单，谁知这么多坑要爬；

1. 外边距叠加1

对于两个相邻元素的margin-bottom和margin-top会叠加，大家应该很熟悉（好像很多观众的样子，你这装逼犯，哈哈哈哈！）；也就是说当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加，他们之间的外边距为两个元素外边距中的较大者。

例如：div1的margin-bottom为10px；div2的margin-top为20px，那么他们之间的“距离”为20px；准确的说应该是这两个div形成的盒模型之间的距离为20px；这个很好理解；

2. 外边距叠加2（坑1）

一定要大声念出这句话三遍、三遍、三遍：当一个元素包含在另一个元素中时（假设没有内边距或边框将外边距分隔开），他们的顶或底外边距也会发生叠加。（查看《精通CSS》P41）为了爬这个坑，我面壁思过几个小时，我容易吗我

例如：

<!DOCTYPE html>
<html>
  <head>
      <title>我的页面</title>
      <meta charset=utf-8>
  </head>调度后续事件

  <body>
    <p class="first" style="background: red; ">按照我们想当然的理解，first与second之间的间距应该只有1em(因为p元素之间的默认margin是1em）</p>
    <div class="second" style="height: 100px; background: pink; ">
      <p class= "second-1"style="margin-top: 50px; background: blue">
          按照我们想当然的理解，p元素应该位于second框往下50px处（margin-top的缘故），
          但是，因为second与p标签的margin-top发生叠加，导致p的margin-top叠加到second的margin-top上，所以first与second的距离为50px。
        </p>
    </div>
  </body>
</html>

如上图，first与second的距离为50px；这是因为second中的p元素的margin-top与second的margin-top发生叠加导致；这时我们只需要将second设置内边距或边框将外边距分隔开就可以了

<!DOCTYPE html>
<html>
  <head>
      <title>我的页面</title>
      <meta charset=utf-8>
  </head>调度后续事件

  <body>
    <p class="first" style="background: red; ">按照我们想当然的理解，first与second之间的间距应该只有1em(因为p元素之间的默认margin是1em）</p>
    <div class="second" style="height: 100px; background: pink; <span style="color:#ff0000;">padding: 1px;</span>">
      <p class= "second-1"style="margin-top: 50px; background: blue">
          按照我们想当然的理解，p元素应该位于second框往下50px处（margin-top的缘故），
          但是，因为second与p标签的margin-top发生叠加，导致p的margin-top叠加到second的margin-top上，所以first与second的距离为50px。
        </p>
    </div>
  </body>
</html>