28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai une liste classique ul/li de liens dont certains élément s'affichent sur deux lignes.

J'aimerais, pour des raisons de lisibilité, que l'interligne entre ces deux lignes soit plus petit que l'interligne entre deux éléments de liste adjacents.

Quelqu'un aurait une solution simple, valide et qui fonctionne (de la même façon) sur les différents navigateurs ?

Merci.
Bonjour,

Pour définir l'interligne, c'est avec la propriété line-height.
Si tu veux que les items de liste soient écartés mais sans impact sur l'interlignage, tu peux utiliser des marges.

Autrement dit:
ul > li {
  margin: .5em 0;
  line-height: 1.15;
}
Super, ça marche très bien (sous Chrome en tout cas).

Sinon, pour mon info, c'est quoi l'unité de mesure par défaut du line-height lorsqu'elle n'est précisée ?

Merci.
Fly06 a écrit :
c'est quoi l'unité de mesure par défaut du line-height lorsqu'elle n'est précisée ?

Il n'y a pas d'unité, c'est un facteur de multiplication. Avec un line-height de "1.5", la hauteur de ligne sera égale à 1,5 fois la taille de texte (valeur calculée de font-size). Tu peux aussi obtenir le même comportement en utilisant l'unité em, ou des pourcentages. Les écritures suivantes sont équivalentes:
element {
  line-height: 1.5;
  line-height: 1.5em;
  line-height: 150%;
  }

Ma préférence va à l'utilisation d'un ratio simple (1.5) ou d'un pourcentage (150%). (Je préfère éviter em car avec line-height cette unité prend un sens différent de son sens habituel et ça peut être un peu déroutant.)