10/10/14
Ces deux propriétés s'appliquent à toute boite, mais différemment pour les boites blocs et en-ligne.
Nous étudions le cas des boites bloc.
Line-height définit la hauteur minimale des lignes de texte d'une boite block.
b a ba
boite jaune : hauteur auto, padding 10
boite rouge : hauteur auto; padding 10, line-height 20
autres espaces à 0
boite rouge : la hauteur calculée sera donc de 40 (deux lignes) ; hauteur du "rouge" 60
boite jaune : hauteur calculée : 60; hauteur du "jaune" : 80
b a ba, b a ba, b a ba, b a ba, b a ba, b a ba
Si vous ne spécifiez pas ces propriétés pour un élément, ce seront celles de son conteneur qui prévaudront (on dit ques ces propriétés sont "héritées").
Le navigateur donne des valeurs par défaut à ces deux propriétés. En général la hauteur de ligne est calculée à partir de la taille des caractères, cela correspond au réglage line-height:normal. Remarquez que la valeur n'est pas "auto" (non autorisée ici).
Pour l'exemple donné, il faut couper le bas ET LE HAUT des lettres. Changez line-height pour les paragraphes , observez le résultat si line-height est plus grand que height.
La propriété vertical-align n'est pas faite pour les boites Block ; elle ne s'applique qu'aux boites En-Ligne (cf. cours suivant).
Utilisez line-height et overflow pour couper les lettres de marcel et de dziedzik en haut ET en bas.