Search code examples
htmlcsslayoutflexboxmargin

How delete margin-bottom on last line blocks?

I have i collection of tags:
enter image description here

How to switch off margin-bottom on line 3 or if tags is 100 or 200 or 300?

Code example:

I create collections of tags. It could be a 1 element or more.

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

.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;
Solution

  • Please try this

    nth-child use to select between tag 7 to tag 9

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