外边距合并-相邻块元素垂直外边距

最新推荐文章于 2024-08-21 10:36:09 发布

WinFang5

最新推荐文章于 2024-08-21 10:36:09 发布

阅读量488

点赞数

分类专栏： Html5+Css3+移动Web_前端入门文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_51061595/article/details/120508268

版权

Html5+Css3+移动Web_前端入门专栏收录该内容

23 篇文章

订阅专栏

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的块元素定义了 margin-bottom
下面的块元素定义了 margin-top 时，就会出现垂直外边距合并。
注意：这里的合并，并不是两个值相加。而是取这两个值的最大值。

解决方案：
两个块元素上下相邻时，尽量只给一个添加margin。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .up {
      width: 200px;
      height: 200px;
      background-color: blue;
      margin-bottom: 20px;
    }

    .down {
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <div class="up"></div>
  <div class="down"></div>
</body>

</html>