Why are margins not collapsing?

Question

I'm starting with CSS and flexbox and I've read about margin collapsing. I've read that Bootstrap for example avoid it (which I understand and agree to it), but I want margins to collapse in a particular case (which you can see in the CodePen above). It's a line of tags with 20px margin on top and bottom. When the line breaks, the margins are not collapsing, so between the two lines of tags I'm getting 40px, but I want to have the same as the bottom or top.

Why margins are not collapsing and what's the best approach to solve this? Thanks.

This is the CodePen.

This is the 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>

And this is the 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

Flex items' margins won't collapse. When flex items wrap, they create their own row, and the individual margins on the flex items won't collapse between rows. Only normal, adjacent block elements stacked will margin collapse the way you're intending. This is a good reference - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

You can create the same layout by removing the top margin from the li's and making that a padding-top on the ul instead, then only the bottom margin will be applied between li's when the flex row wraps.

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>