Forum : Marge impossible à supprimer entre les éléments d'une liste à puce

Bonsoir,

Voici le code en question, ça sera plus simple pour tout le monde : https://jsfiddle.net/1vszLdkh

Comme vous pouvez le voir, dans le premier exemple, il y a une marge entre les différents éléments de la liste à puce. Et ce, malgré les divers margin:0; et padding:0;.

Je cherche à comprendre pourquoi j'ai ce comportement par défaut. Mais je ne comprends pas vraiment...

Dans le second exemple, le soucis ne se présente plus, car j'ai appliqué un margin-right: -4px; sur .bloc-items.two li.bloc-item {}...

Mais je ne trouve pas cela super.

Une explication / astuce à me proposer ?

Bonne soirée.

2 réponses

YiuJia

Réponse acceptée

L'espace est dû au display inline-block. Une astuce simple et de rajouter des commentaires HTML entre les li :

<ul class="bloc-items one">
    <li class="bloc-item"><a href="http://www.lien1.com">X</a></li><!--
    --><li class="bloc-item"><a href="http://www.lien2.com">X</a></li><!--
    --><li class="bloc-item"><a href="http://www.lien3.com">X</a></li>
</ul>

Marc TABARIES

Auteur

Re,

Merci pour cette astuce.

Après avoir regardé sur Internet, il semblerait qu'il existe plusieurs solutions : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

C'est vraiment étonnant que l'on soit obligé de passer par de telles solutions.

Merci pour ta participation.