Suprimer les espaces entre les élements en display : inline-block

Comment supprimer les espaces entre les différents éléments positionnés en inline-block ? Cette question m’a été posées plusieurs fois ces derniers jours via Twitter et lors d’échanges. Je me suis dis que ça pourrait être utile de publier une petite note à ce sujet :)

Pour disposer des éléments les uns à coté des autres, on utilise à juste titre la valeur inline-block de la propriété display. Elle est intéressante nottament car elle permet d’afficher ces éléments sur une même ligne sans les retirer du flux et en les dimensionnant. En revanche l’utilisation du display: inline-block sur une série d’éléments créé des espaces indésirables. Ces espaces sont appellés « White-space » et ont une largeur d’environ 4px qui diffère en fonction du navigateur utilisé.

Voici un exemple :

• Accuel
• A propos
• Produits
• Notre blog
• Contact

nav > ul > li {
    display: inline-block;
    height: 40px;
    font-size:18px;
    background-color:#164387
}
nav li a {
    border-left: 1px solid #3862A1;
    border-right: 1px solid #0F3166;
    color: #FFFFFF;
    display: inline-block;
    font-family: Arial;
    height: 40px;
    line-height: 40px;
    padding: 0 31px;
    cursor: pointer;
}

Voici le résultat :

Voici deux solutions pour supprimer ces espaces entre les éléments de type « inline-block ».

Solution 1 : Supprimer les espaces dans le HTML

Si vous voyez ces espaces c’est parce qu’ils existent dans le code HTML. Il suffit donc de supprimer ces espaces dans votre code HTML pour résoudre le problème. Nous avons donc le résultat suivant :

• Accuel
• A propos
• Produits
• Notre blog
• Contact

on peut aussi supprimer cet espace avec les commentaires :

• Accuel
• A propos
• Produits
• Notre blog
• Contact

Cela créé un peu le désordre visuellement mais les espaces entre les éléments de type « inline-block » sont bien supprimés.

Solution 2 : Mettre une font-size à 0

Un espace qui a une font-size de 0px aura une largeur de 0px aussi. Cette solution consiste donc à attribuer une font-size égale à 0 aux éléments de type inline-block. Il faut bien penser ensuite à attribuer une nouvelle font-size au contenu de l’élément pour qu’il soit visible.
En d’autres termes :

nav ul {
	font-size:0;
}
nav > ul > li {
    font-size:18px;
}

Voici le résultat partagé sur CodePen obtenu avec cette seconde méthode