éléments de bloc d'alignement sur le dessus lors de l'utilisation en ligne de hauteur

Question

Si je donne un line-height à un élément de bloc comme h1 il ajoute l'espace au-dessus et au-dessous de la ligne de chaque texte, cela signifie que l'élément ne commence pas sur la même position supérieure . Que faire si je veux juste un espacement en dessous de chaque ligne? Je sais que vertical-align ne fonctionne qu'avec éléments en ligne.

J'ai également reconnu que le texte d'un élément de bloc comme une balise p n'est pas au-dessus de la ligne "normal", par défaut. Si j'ajoute une couleur de fond à l'élément, la couleur est également visible quelques pixels au-dessus du texte. Pourquoi?

Answer 1

TLDR: utilisez position: relative et une valeur supérieure négative pour l'imiter.

Explication: Vous avez raison. La hauteur de ligne est toujours ajoutée au-dessus et au-dessous de chaque caractère. Donc, si votre taille de police est 12px et que vous avez une hauteur de ligne de 18px, vous obtiendrez 3px au-dessus et 3px en dessous de chaque "ligne". Chacun de ces espaces 3px est appelé un "demi-leader". Cependant, vous pouvez utiliser position: relative avec une valeur supérieure négative pour donner l'impression qu'il n'y a qu'un espace supplémentaire sous chaque ligne. Donc, disons que vous vouliez avoir 8px d'espace entre chaque ligne au lieu de seulement 6px de l'exemple ci-dessus (18px/12px = 6px = 3px en haut + 3px en bas). Pour ce faire, augmentez la hauteur de ligne de 18px à 20px pour obtenir le demi-amorce 4px et donnez un total de 8px d'espace entre les lignes. Ensuite, ajoutez position: relative; top: -2px pour ramener la ligne au même endroit où elle était lorsque la hauteur de la ligne était 18px.

Même si le navigateur ajoute toujours 4 px d'espace au-dessus et en dessous de chaque ligne, le positionnement vertical négatif donne l'impression que l'espacement supérieur a été coupé.