如何删除最后一行块上的 margin-bottom？

Question

我有我的标签集合：

如何关闭第 3 行的 margin-bottom 或者如果标签是 100 或 200 或 300？

代码示例：

我创建标签集合。它可以是 1 个元素或更多。

<div class="collection">
  <div class="tag">1</div>
  <div class="tag">2</div>
  <div class="tag">3</div>
  <div class="tag">4</div>
  <div class="tag">5</div>
  <div class="tag">6</div>
  <div class="tag">7</div>
  <div class="tag">8</div>
  <div class="tag">9</div>
  [...or more]
  <div class="footer">
    footer
  </div>
</div>

SASS 例子

.collection
  width: 900px;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  padding: 20px; 
 
.tag
  width: 300px;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1px solid black;
  margin-bottom: 10px;
  
.footer
  margin-top: 30px;
  background: blue;
  width: 900px;
  color: white;
  padding: 30px;

Answer 1

您始终可以在第 3 行的元素上使用下面的标签。 margin-bottom: 0;
如果不清楚，请分享更多详细信息/您的代码。

Answer 2

请试试这个

nth-child 在 tag 7 到 tag 9

之间用于 select

.tag:nth-child(n+7):nth-child(-n+9){
  margin-bottom: 0 !important;
 }

.collection{
  width: 900px;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  padding: 20px; 
 }
.tag{
  width: 300px;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1px solid black;
  margin-bottom: 10px;
 }
 .tag:nth-child(n+7):nth-child(-n+9){
  margin-bottom: 0 !important;
 }
.footer{
  background: blue;
  width: 900px;
  color: white;
  padding: 30px;
  }

<div class="collection">
  <div class="tag">1</div>
  <div class="tag">2</div>
  <div class="tag">3</div>
  <div class="tag">4</div>
  <div class="tag">5</div>
  <div class="tag">6</div>
  <div class="tag">7</div>
  <div class="tag">8</div>
  <div class="tag">9</div>
  
  <div class="footer">
    footer
  </div>
</div>

如何删除最后一行块上的 margin-bottom？

How delete margin-bottom on last line blocks?

html

css

layout

flexbox

margin