aligner les éléments du bloc sur le haut lors de l'utilisation de la hauteur de ligne

Question

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

J'ai également reconnu qu'un texte d'un élément de bloc comme un p n'est pas en haut avec une hauteur de ligne "normale", 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 : Utiliser position: relative et une valeur supérieure négative pour le simuler.

Explication : Tu as raison. La hauteur de ligne est toujours ajoutée au-dessus et au-dessous de chaque caractère. Ainsi, si votre taille de police est de 12px et que votre hauteur de ligne est de 18px, vous aurez 3px au-dessus et 3px au-dessous de chaque "ligne". Chacun de ces espaces de 3 px est appelé un "demi-fond".

Cependant, vous pouvez utiliser position: relative avec une valeur supérieure négative pour donner l'impression qu'il n'y a que de l'espace ajouté sous chaque ligne.

Supposons que vous souhaitiez avoir 8px d'espace entre chaque ligne au lieu des 6px de l'exemple ci-dessus (18px/12px = 6px = 3px en haut + 3px en bas). Pour ce faire, augmentez la hauteur de ligne de 18 à 20px pour que le demi-largeur soit de 4px et que l'espace total entre les lignes soit de 8px. Ajoutez ensuite position: relative; top: -2px pour ramener la ligne au même endroit où elle se trouvait lorsque la hauteur de ligne était de 18px.

Même si le navigateur ajoute toujours 4px d'espace au-dessus et au-dessous de chaque ligne, le positionnement vertical négatif donnera l'impression que cet espace supplémentaire a été supprimé.

Answer 2

Et si je veux juste un espacement sous chaque ligne ?

Je ne vois pas vraiment comment la réponse acceptée est meilleure que cela, dans la plupart des cas :

margin-bottom: .5em

L'important est d'utiliser em car elle sera basée sur la taille actuelle de la police.

De plus, notez que si le texte s'enroule sur deux lignes et que vous utilisez la fonction line-height: 2 alors vous vous retrouverez avec un énorme vide entre les lignes. Dans ce cas, il est presque certain que vous feriez mieux d'utiliser margin-bottom avec un défaut line-height .