css如何人为的制造边距塌陷(margin collapse)效果?

作者站长头像
站长
· 阅读数 6

如图，宽度不固定的灰色容器中有N个固定宽高的div盒子

盒子均设置了右边距和下边距

最下面的两个盒子，希望盒子的下边缘能和灰色容器的下边缘重合

尝试方案：

  1. 首先想到css的边距塌陷，实际测试发现边距塌陷在这种布局中无效
  2. 给下面的两个盒子单独设置margin-bottom:0,由于灰色容器宽度不固定，最下层的盒子数量不固定，该方案不可

css如何人为的制造边距塌陷(margin collapse)效果?

<!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>边距塌陷</title>
    <style>
      .main {
        width: 700px;
        margin: 100px auto;
        background-color: #efefef;
      }
      .d1 {
        /*  */
      }
      .d2 {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin-bottom: 50px;
        margin-right: 50px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="d1">
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
        <div class="d2"></div>
      </div>
    </div>
  </body>
</html>
回复
1个回答
avatar
test
2024-07-08

因为你的 .d2 的容器改变为了 inline-block 破坏了 margin 合并。

所以我觉得想要实现你期望的布局，可以使用 flex 搭配 gap 属性来实现，具体CSS代码如下：

.main {
  width: 700px;
  margin: 100px auto;
  background-color: #efefef;
}
.d1 {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}
.d2 {
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
}

这里是 CodePen的在线Demo

但是 gap in flex 会有一些兼容问题，但可以用 grid 布局来解决。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容