Comment la hauteur de ligne affecte-t-elle la hauteur des éléments en ligne et de leurs boîtes ?

Hauteur de ligne dans les éléments en ligne

La détermination de la mécanique de la hauteur de ligne dans les éléments en ligne peut être complexe. Voici une explication détaillée pour clarifier les nuances :

Hauteur d'une boîte en ligne

Les éléments en ligne créent des boîtes en ligne définies par la hauteur de la ligne :

The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'.

Donc, si vous définissez line-height sur 15px pour un élément en ligne, sa hauteur de boîte sera 15px.

Hauteur d'une boîte de ligne

Cependant, les boîtes de ligne englobant des boîtes en ligne ont également une hauteur définie :

The height of a line box is determined by the rules given in the
section on line height calculations.

Pour les boîtes en ligne avec des hauteurs de ligne égales et un alignement vertical, la hauteur de la zone de ligne est égale à la hauteur de la ligne. Ainsi, dans ce cas, la hauteur de la zone de ligne est également de 15 pixels.

Hauteur de la zone de contenu d'une boîte en ligne

Les outils de développement des navigateurs affichent souvent la hauteur de la zone de contenu dans la zone en ligne. Cette hauteur est généralement déterminée par l'ascendant et le descendant maximum de la police :

The height of the content area should be based on the font, but this
specification does not specify how.

Par conséquent, la hauteur de la zone de contenu peut varier et peut être plus grande que la hauteur de la ligne, même lorsque la taille de la police est définie. à la même valeur que la hauteur de ligne.

En résumé, les différentes hauteurs associées aux éléments en ligne comprennent :

• Le La hauteur de la zone de contenu est déterminée par la hauteur de ligne.
• La hauteur de la zone de ligne est également déterminée par la hauteur de ligne pour les boîtes en ligne avec des hauteurs de ligne égales et un alignement vertical.
• La hauteur de la zone de contenu est déterminé par l'ascendant et le descendant maximum de la police.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!