隣接する子要素の間にだけ、隙間が入ります。 外側の端には入らないため、打ち消すための負のマージンもラッパーも要りません。 Gridでも同じように使えます。

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

<ul class="tags">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

子要素に半分ずつマージンを付け、外側に出た分を親の負のマージンで打ち消していました。 負のマージンがはみ出さないよう、overflow: hiddenのラッパーも必要です。

.tags-wrapper {
  overflow: hidden;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}

.tags > li {
  margin: 4px;
}

<div class="tags-wrapper">
  <ul class="tags">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</div>