Comment contrer le whitespace du inline-block

Attention ! Cet article a plus de 1 an (2709 jours), ce qui signifie qu'il n'est pas forcément à jour !

Ça fait longtemps que je suis Front-End mais il m’arrive encore des trucs, qui quelques fois, me surprennent. Comme de faire un menu super simple et d’avoir un espacement non volontaire. Effectivement en faisant un menu avec un UL et des LI en inline-block, nous finissons avec des espacement entre les LIs.

Comment contrer le whitespace du inline-block

DÉMO

Méthode en collant le code HTML

<ul>
    <li>Pommes</li><li>Raisins</li><li>Bananes</li><li>Poires</li><li>Fraises</li>
</ul>

Méthode du HTML comment

<ul>
    <li>Pommes</li><!--
    --><li>Raisins</li><!--
    --><li>Bananes</li><!--
    --><li>Poires</li><!--
    --><li>Fraises</li>
</ul>

Méthode sans fermeture de tag

<ul>
    <li>Pommes
    <li>Raisins
    <li>Bananes
    <li>Poires
    <li>Fraises
</ul>

Méthode avec letter-spacing

Avec la même structure ajouter ce CSS

ul{
    letter-spacing: -0.31em;
}
ul li {
    letter-spacing: normal;
}

Méthode font-size

Avec la même structure ajouter ce CSS

ul {
    font-size: 0;
}
ul li {
    font-size: 1.8rem;
}

Méthode avec table

Avec la même structure ajouter ce CSS

ul {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-spacing: -2em;
}
ul li {
    display: inline-block;
    word-spacing: normal;
}

Encore une fois vous pouvez voir en action toutes ces techniques en suivant ce lien : DÉMO

Catégories :

HTML CSS