为什么边距不会折叠？

Question

我正在学习 CSS 和 flexbox，并且了解到 margin collapsing。我知道像 Bootstrap 这样的框架避免了它（我理解并同意），但我想在特定情况下让边距折叠（您可以在上面的 CodePen 中看到）。这是一行带有顶部和底部 20 像素边距的标签。当该行断开时，边距不会折叠，因此在两行标签之间我得到 40px 的空白，但我希望与顶部或底部相同。

为什么边距不会折叠，最佳解决方法是什么？谢谢。

这是CodePen。

这是 HTML：

<main>
  <div class="main-wrapper">
    <div class="tags">
      <ul>
        <li>
          <a href="#">ELEMENT 1</a>
        </li>
        <li>
          <a href="#">ELEMENT 2</a>
        </li>
        <li>
          <a href="#">ELEMENT 3</a>
        </li>
        <li>
          <a href="#">ELEMENT 4</a>
        </li>
        <li>
          <a href="#">ELEMENT 5</a>
        </li>
      </ul>
    </div>
  </div>
</main>

这是 CSS 代码：

$red: #FC575E;
$dark-grey: #3A4250;
$medium-grey: #e6e6e6;
$white: #FFFFFF;
$light-grey: #F1F4F5;
$width: 800px;

ul {
  list-style-type: none;
  padding-left: 0px;
}

a {
  text-decoration: none;
}

main {
  background-color: $light-grey;
  padding: 30px 0px;
}

.main-wrapper {
  max-width: $width;
  margin: auto;
}

.tags {
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
  }
  li {
    margin: 20px 10px;
  }
  a {
    display: block;
    justify-content: center;
    color: $dark-grey;
    background-color: $medium-grey;
    border-radius: 20px;
    padding: 7px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  a:hover {
    color: $white;
    background-color: $red;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

- Elias Garcia

---

@SebastianFarham 的 "margin collapse" https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing - Michael Coker

https://www.joshwcomeau.com/css/rules-of-margin-collapse/ - Bergi

Answer 1

Flex项目的外边距不会折叠。当Flex项目换行时，它们会创建自己的一行，并且在行之间Flex项目上的单个外边距不会折叠。只有正常的、相邻的块级元素堆叠才会以您打算的方式折叠外边距。这是一个好的参考-https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing 您可以通过从

中移除顶部外边距并将其作为ul的padding-top进行设置来创建相同的布局，然后仅当Flex行换行时，底部外边距才会应用于

之间。

ul {
  list-style-type: none;
  padding-left: 0px;
}

a {
  text-decoration: none;
}

main {
  background-color: #F1F4F5;
  padding: 30px 0px;
}

.main-wrapper {
  max-width: 800px;
  margin: auto;
}

.tags ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 20px;
}
.tags li {
  margin: 0 10px 20px;
  display: block;
}
.tags a {
  display: block;
  justify-content: center;
  color: #3A4250;
  background-color: #e6e6e6;
  border-radius: 20px;
  padding: 7px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tags a:hover {
  color: #FFFFFF;
  background-color: #FC575E;
  transition: background-color 0.3s ease, color 0.3s ease;
}

<main>
  <div class="main-wrapper">
    <div class="tags">
      <ul>
        <li>
          <a href="#">ELEMENT 1</a>
        </li>
        <li>
          <a href="#">ELEMENT 2</a>
        </li>
        <li>
          <a href="#">ELEMENT 3</a>
        </li>
        <li>
          <a href="#">ELEMENT 4</a>
        </li>
        <li>
          <a href="#">ELEMENT 5</a>
        </li>
      </ul>
    </div>
  </div>
</main>

- Michael Coker

---

我不知道 flex 项目的边距不会折叠，我会查看链接，感谢您的回答！ - Elias Garcia

Answer 2

解决这个问题的快速方法是给 .main 添加 padding-bottom: 50px;，并将 li 的 margin-bottom: 0;

- Ravenous