Space between menu items

Goktug 0
Viewed 28

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>

formatting css html
3 Answers

You should also add some styling to the a links. Adding :not(:first-of-type) makes sure this will only happen from the second item and onward

.TopMenu a:not(:first-of-type) {
    padding-left: 8px;
}
Xiduzo0

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

.TopMenu {
  gap: 10px;
}
siraj0

Just switch justify-content to space-between

.TopMenu{
display: flex;
align-items: center;
width: 50%;
height: 40px;
justify-content: space-between;
}
<html>
<body>
  <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>
</body>
</html>

See it in jsfiddle

MD90
Related