display: inline-block et les espaces indésirables

La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux.

L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. S'il n'est pas gênant, tant-mieux; sinon, de multiples techniques plus biscornues les unes que les autres existent.

Le cas «white-space»

Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. Chaque caractère «espace», «tabulation», «nouvelle ligne», «retour chariot» ou «nouvelle page» peut tenir lieu de white-space et séparer les blocs visuellement.

L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police.

Dans la grande majorité des cas, cette situation n’est guère gênante. Cependant, elle peut le devenir si votre présentation doit être calée au pixel près, par exemple pour un parent de 600 pixels de large devant contenir trois paragraphes de 200 pixels chacun :

#main {
   width: 600px
}
#main p {
   display: inline-block;
   width: 200px;
}

Démonstration

De nombreux concepteurs se sont penchés sur cette problématique, certains tentent de jouer avec les marges négatives, d’autres sur l’espace entre lettres (letter-spacing). Mais à l’heure actuelle, aucune solution ultime n’a été publiée.

La solution sûre : modification du code HTML

La première solution et la plus logique consiste à supprimer les white-space physiquement et directement au sein du code HTML. Cela peut se faire en «collant» les éléments les uns aux autres :

<div>
<p>Lorem Elsass ipsum</p><p>réchime amet sed bissame so libero knackes choucroute</p><p>Hopla kuglopf flammekueche</p>
</div>

Variante : commentaires HTML

On peut encore transformer les white-spaces en commentaires HTML, qui ne seront pas interprétés par les navigateurs mais préserveront visuellement les retours à la ligne, ce qui facilitera la lecture du code par un intégrateur :

</p><!--
--><p>

Ce qui donne au final :

<div>
<p>Lorem Elsass ipsum</p><!-- @whitespace
--><p>réchime amet sed bissame so libero knackes choucroute…</p><!-- @whitespace
--><p>Hopla kuglopf flammekueche</p>
</div>

Cette alternative, bien que parfois un peu «inesthétique» et nécessitant d'avoir accès aux fichiers HTML, se révèle sans aucun doute la plus robuste et la plus pérenne actuellement.

Démonstration

Les "bidouilles" CSS

Via CSS, il existe également certaines techniques permettant de contourner cet espacement non souhaité.

Aucune des méthodes décrites ci-dessous ne sera parfaite, je préfère vous l'annoncer sans détour, mais elles ont un avantage indéniable également : celui de corriger le problème sans avoir à toucher à la structure HTML, et en employant la technologie adaptée, à savoir CSS.

1. Bidouille 1 : white-space: nowrap et overflow: hidden

2. Bidouille 2 : letter-spacing négatif de 0.31em (méthode recommandée par Yahoo!)

3. Bidouille 3 : margin-right négatif de -0.25em

La technique de font-size : 0 sur le parent

Une solution parmi les plus robustes consiste à appliquer une taille de police nulle au parent, puis à redéfinir la taille de police au sein de chacun des blocs.

L’unité appropriée sera forcément non relative (pixels par exemple) puisqu’une unité fluide telle que em, exprimée par rapport à l’unité parente, sera inopérante puisque égale à zéro :

Pour pallier le problème d'unité relatif, il est possible d'opter pour une unité introduite en CSS3 : rem (pour «root em»).

Une taille de police en rem n'est pas relative à la taille de police de son parent, mais à celle de la racine du document (donc l'élément <html> en langage HTML). Bien que reconnue par une majorité des navigateurs récents (depuis IE9), il lui est aisé de proposer une alternative en pixels pour les anciens navigateurs de cette manière :

#main {
   width: 800px;
   font-size: 0;
}
#main p {
   display: inline-block;
   width: 200px;
   font-size: 20px; font-size: 2rem;
}

L'intérêt principal est que la taille de police des éléments demeure fluide tel que le serait l'unité em.

Démonstration

La technique du framework Pure.io

PureCSS.io est un framework CSS mis à jour par Yahoo! et dont les grilles de mise en forme reposent sur le positionnement inline-block. 

Afin de contourner l'ensemble des problèmes dûs au whitespace, PureCSS a révélé sa technique au sein d'un billet de blog. Il s'agit d'une combinaison de plusieurs stratagèmes :

Sur le parent :

• un letter-spacing négatif de -0.31em
• une suppression de toutes ligatures et fioritures typographiques via text-rendering: optimizespeed;
• une application d'une fonte considérée "universelle" via font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

Sur chacun des enfants :

• display: inline-block (forcément)
• une remise à zéro des valeurs du parent : letter-spacing: normal; word-spacing: normal; text-rendering: auto;
• le rétablissement de la fonte souhaitée, par exemple font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;

Grâce à ce cumul d'astuces, nous obtenons le résultat souhaité de manière quasi universelle sur l'ensemble des navigateurs.

Remarque : PureCSS applique une couche additionnelle à ses grilles, il s'agit du positionnement Flexbox que PureCSS applique aux navigateurs modernes.

Démonstration

La technique "display: table" de Cahnory

Un développeur web français, Cahnory, a découvert une solution beaucoup plus simple que toutes les autres. En tout cas sur le papier.

Globalement l'idée consiste à profiter du comportement naturel d'un tableau, à savoir qu'il ne peut pas y avoir d'espace entre les cellules, par défaut.

En clair, il suffit tout simplement d'appliquer  display: table; sur le parent !

Sur le principe, c'est parfait, il est cependant nécessaire d'ajouter quelques petites précautions d'usage sur le parent pour assurer une largeur globale et se prémunir de tout agrandissement dû aux contenus : table-layout: fixed; et width: 100%.

Malheureusement, en pratique, cette solution se heurte à quelques navigateurs défaillants, en l'occurence Internet Explorer et Firefox chez lesquels l'espace indésirable demeure. Il sera nécessaire d'appliquer un word-spacing: -2em; sur le parent et un word-spacing: normal; sur chaque enfant pour supprimer cet espace.

Au final et avec l'ensemble des précautions, le code final sera :

.parent {
  display: table; 
  width: 100%; 
  table-layout: fixed; 
  word-spacing: -2em;
}
.enfant {
  display: inline-block; 
  word-spacing: normal;
}

Démonstration

Conclusion

Ce petit et rapide tour d'horizon des différentes techniques de contournement de ce fâcheux espace indésirable introduit par la propriété inline-block nous apprend en définitive que nous n'en sommes encore qu'à un stade de l'expérimentation et du tâtonnement.

En attendant la solution ultime émanant de CSS3 mais encore non supportée, l'ensemble des techniques CSS repose actuellement sur des hypothèses et sont fortement dépendantes de contextes précis : rien de vous assure que ces bidouilles fonctionneront partout selon les configurations de vos visiteurs. C'est donc à vous de les tester au cas par cas.

La meilleure solution, si vous en avez la possibilité, demeure finalement de supprimer physiquement l'espace au sein du HTML.

Voir toutes les techniques