Search code examples
htmlcssformatting

Space between menu items

I'm trying to make menu on top bar but I want to make a little bit of space between each element. How can I make some space between each menu item?

.TopMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 40px
}
<div class="TopMenu">
  <a class="active" href="#home">Inicio</a>
  <a href="#tecnologias">Tecnologias Que Trabajamos</a>
  <a href="#labs">Labs</a>
  <a href="#contacto">Contacto</a>
  <a href="#legal">Legal</a>
</div>

Solution

  • Since you are using a flexbox container you can use the gap attribute on your flex element as follows:

    .TopMenu {
  gap: 10px;
}