Question

我从CSS和flexbox开始，我读过有关边缘折叠的内容。我已经读过Bootstrap，例如避免它（我理解并同意它），但我希望边缘在特定情况下崩溃（你可以在上面的CodePen中看到）。这是一系列标签，顶部和底部有20px的边距。当换行时，边距不会折叠，所以在两行标签之间我得到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;
  }
}

Answer 1

弹性物品＆＃39;利润率不会崩溃。当flex项目换行时，它们会创建自己的行，并且flex项目上的各个边距不会在行之间折叠。只有正常的，相邻的块元素堆叠在一起才会使您想要的方式崩溃。这是一个很好的参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

您可以通过从li移除上边距并在padding-top上设置ul来创建相同的布局，然后只有底边距将会当弹性行换行时，在li之间应用。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

快速解决此问题的方法是.main padding-bottom: 50px;和li margin-bottom: 0;

为什么保证金不会崩溃？

2 个答案: