[HTML-CSS]Espace entre éléments « inline »

NoSmoking

Un espace indésirable

Lorsque des éléments ont un mode de rendu en display:inline ou display:inline-block, on note la présence d'un espace, qui peut être indésirable, entre ces éléments, le fameux « whitespace ».

Prenons l'exemple d'un menu sur base de la structure HTML suivante :

<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

L"affichage sera le suivant :

On note bien l'espace entre les items, mais voilà on n'en veut pas !

Nota : on obtiendrait le même rendu avec une structure « moderne » sur base d'éléments <nav> et <a>.

Plusieurs façons de le supprimer

Nous allons voir cinq façons de procéder, trois en modifiant légèrement le code HTML et deux en modifiant le mode de rendu du conteneur ou celui des éléments.

Ne pas mettre la balise de fermeture </li>

Dans ce cas le « whitespace » disparaît et malgré l'absence de balise de fermeture le code HTML reste valide.

Le code HTML devient le suivant :

<ul>
  <li>Item #1
  <li>Item #2
  <li>Item #3
</ul>

Attention : cette astuce n'est pas valable pour tous les types d'éléments et notamment pour des éléments <a>.

Utiliser les commentaires HTML

Le code HTML devient le suivant :

<ul>
   <li>Item #1</li><!--
--><li>Item #2</li><!--
--><li>Item #3</li>
</ul>

Ce n'est pas très élégant mais efficace.

Supprimer les espaces entre balises

Le code HTML devient le suivant :

<ul>
  <li>
    Item #1</li><li>
    Item #2</li><li>
    Item #3</li>
</ul>

ou encore

<ul>
  <li>Item #1</li><li>Item #2</li><li>Item #3</li>
</ul>

La première façon étant peut être plus lisible.

Mettre les éléments en display:table-cell

Le code HTML est classique :

<ul class="sans-espace">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

On ajoute, dans ce cas, la règle CSS suivante :

.sans-espace li {
  display: table-cell;
}

Mettre le conteneur en display:flex

Le code HTML est classique :

<ul class="sans-espace">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

On ajoute, dans ce cas, la règle CSS suivante :

ul.sans-espace {
  display: flex;
}

Observations

Bien sûr on pourrait également mettre les éléments <li> en float:left mais les éléments sortants partiellement du flux il faudrait ajouter une hauteur au conteneur <ul> ce qui n'est pas toujours souhaitable.

A vous de choisir celle qui vous paraît la plus lisible et la plus maintenable.

Ressources