hauteur vs ligne style hauteur
Quelle est la différence entre l'utilisation de ces deux lorsqu'il s'agit de texte qui ne sera jamais plus d'une ligne? Tous deux peuvent produire des résultats similaires à l'écran à partir de ce que je peux voir en ce qui concerne les éléments situés en haut ou en bas de l'élément. Pourquoi utiliser line-height du tout si oui? La hauteur aurait plus de sens à utiliser.
Edit: Un exemple de ceci est un bouton stylisé créé à partir d'un div avec du texte à l'intérieur. Ce ne sera jamais multiligne. Alors, la hauteur de ligne serait-elle nécessaire pour des raisons de compatibilité? ou quelque chose que je ne connais pas?
Merci!
height est la mesure verticale du conteneur.
line-height est la distance entre le haut de la première ligne de texte et le haut de la seconde.
Si utilisé avec une seule ligne de texte, je m'attendrais à ce qu'ils produisent des résultats similaires dans la plupart des cas.
J'utilise height lorsque je veux définir explicitement la taille du conteneur et line-height pour la mise en page typographique, ce qui peut être pertinent si l'utilisateur redimensionne le texte.
Si vous placez le texte dans un div, donnez à celui-ci une hauteur et si le texte devient deux lignes (peut-être parce qu'il est affiché sur un petit écran, comme un téléphone), le texte chevauchera les éléments situés en dessous. Par contre, si vous donnez à la div une hauteur de ligne et que le texte passe à 2 lignes, la div se développera (en supposant que vous ne donniez pas également une hauteur à la div).
Voici un violon qui le démontre.
En supposant que le texte soit plus petit que le conteneur:
Définir la hauteur de ligne sur le conteneur spécifie la hauteur minimale des boîtes de lignes qu'il contient. Pour une ligne de texte, le texte est centré verticalement à l'intérieur du conteneur.
Si vous définissez hauteur sur le conteneur, celui-ci grossira verticalement, mais le texte à l'intérieur commencera sur la première ligne (supérieure) à l'intérieur.
Pour des raisons pratiques, dans le cas où vous citez (ne jamais envelopper à plus d'une ligne) line-height centrera verticalement le texte. Soyez prudent avec cette hypothèse car l'utilisateur contrôle en fin de compte la taille de la police.
hauteur = hauteur de ligne + padding-top + padding-bottom