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

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

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

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

尝试方案：

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

<!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.6k

因为你的 .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 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？

css布局怎么保证右边一直在可视范围内？