How I learned to stop worrying about the margins and love the gap

We've all been in that situation where you're making a navbar or footer that contains multiple action components, like links and whatnot. You're going to need to add a little space between the items so often your first thought is to reach for margins.

    <nav>
      <a href="#" class="button">Home</a>
      <a href="#" class="button">About</a>
      <a href="#" class="button">Portfolio</a>
      <a href="#" class="button">Contact</a>
    </nav>
.button {
  margin-left: 10px;
}

You might even need a little pseudo style to leave the last item unaffected

.button {
  margin-left: 10px;
}

.button:last-child {
  margin-left: 0;
}

Ever since the introduction of gap in css grids and shortly after flexbox, we can hoist this layout concern to the parent... where it should be:

nav {
  display: flex;
  gap: 10px;
}

Now nav takes full responsibly of the spacing and you can drop anything into the contents of nav, spaced out and ready to go.

This technique is particularly useful in the world of reusable React components where a general use wrapper component can take any child component, render it and space it without the child component being concerned with its own layout.