Se Débarrasser des Espacement Superflus Entre les éléments

Par Riless, il y a 12 ans

Les bases HTML/CSS

j'ai voulu créer un petit header contenant des liens vers des pages comme ceci:

HTML:

<nav>   
    <a href="#">Lien 1</a>
    <a href="#">Lien 2</a>
    <a href="#">lien 3</a>
</nav>

CSS: 

nav a{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding: 0 10px 0 10px;
    font-size: 14px;
    background: rgb(168, 36, 36);
}

ça a donné ça:

j'ai obtenu des espacement entre les élément (qui ne sont pas des margin)

j'ai remarqué que le problème se résolvais en mettant les élément en float (left ou right), mais dans mon cas, je ne veux pas mettre en float ces éléments.

y-a-il quelqu'un qui pourra m'expliquer à quoi sont due ces espacements, et comment peut-on les résoudre ?

Merci d'avance.

1 réponse

Riless, il y a 12 ans

ça y est j'ai trouvé la réponse!

pour ceux que ça intéresse, les élément en display:inline-block sont sensible au retours à la ligne, dans l'affichage, les retour à la lignes serons transformé en espaces " ", c'est pour cela qu'il faudra écrire :

<nav> 
    <a href="#">Lien 1</a><a href="#">Lien 2</a><a href="#">lien 3</a>
</nav>

je ne sais pas s'il y a d'autres propositions en CSS pour faire ça, mais cette méthode me satisfait.