Le mode de rendu CSS inline et l’apparition d’espaces indésirables entre les éléments HTML

HTML-CSS

Tout développeur web se trouve un jour confronté à ce curieux comportement qui semble encore toucher, version après version, l'ensemble des navigateurs les plus utilisés . Des éléments faisant partie d'une série (un menu horizontal par exemple), indentés de façon irréprochable dans notre code HTML et auxquels nous avons affecté une déclaration display: inline; ou display: inline-block; via CSS s'affichent côte à côte avec une agaçante marge de séparation de plus ou moins 4 pixels.

<ul>
    <li>Paris</li>
    <li>Lyon</li>
    <li>Nantes</li>
    <li>Strasbourg</li>
    <li>Antananarivo</li>
</ul>

Or, nous cherchons dans la plupart des situations à afficher nos éléments collés les uns aux autres. Dans le cas d'une navigation, cela sous-entend éviter la présence de ces espaces indésirables entre nos différentes entrées.

La double origine de ce comportement

Le mode de rendu CSS inline

Ce comportement n'est cependant pas à considérer comme un bug. Nativement, le mode de rendu CSS inline est pensé pour être employé à des fins d'habillage de texte et, ainsi, agencer les éléments les uns à côté des autres sur une ligne horizontale comme vous espaceriez à l'écrit les différents mots qui constituent une phrase. Utiliser ce mode de rendu pour afficher une navigation revient finalement à en faire un usage détourné (mais tout-à-fait autorisé). N'attendez donc pas de correction de la part des concepteurs de navigateurs : à l'heure où l'accessibilité des contenus numériques devrait intégrer tous les cahiers des charges, ils refuseront probablement de supprimer les espaces entre les mots. 🙂

La présence d'espaces entre les éléments dans le code HTML

Vous trouverez, dans votre code HTML, une multitude d'espaces entre vos différents éléments. Les sauts de ligne et les indentations obtenues à coups de tabulation comptent pour des espaces !

Des solutions efficaces : minimiser les espaces entre éléments dans votre source HTML

Pour pallier à notre problème, nous sommes immédiatement tentés de mettre en place une vilaine rustine de ce type :

li { margin-left: -4px; }

Problème : certains navigateurs afficheront un espacement de 3 pixels. Pour d'autres, ce sera 5 pixels...

Voici trois astuces pérennes et rapides à mettre en oeuvre pour supprimer les marges indésirables entre des éléments agencés côte à côté à l'aide des déclarations display: inline; ou display: inline-block;.

Changer le mode d'indentation de notre code pour les éléments incriminés :

<ul>
    <li>Paris
    </li><li>Lyon
    </li><li>Nantes
    </li><li>Strasbourg
    </li><li>Antananarivo
    </li>
</ul>

Employer des commentaires vides :

<ul>
    <li>Paris</li><!--
    --><li>Lyon</li><!--
    --><li>Nantes</li><!--
    --><li>Strasbourg</li><!--
    --><li>Antananarivo</li>
</ul>

Ne pas mettre de balise fermante (HTML5 uniquement) :

<ul>
    <li>Paris
    <li>Lyon
    <li>Nantes
    <li>Strasbourg
    <li>Antananarivo
</ul>

Dubitatifs ? Faites vous-même le test !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.