How Does Line-Height Affect the Height of Inline Elements and Their Boxes?

Line-Height in Inline Elements

Determining the mechanics of line-height in inline elements can be intricate. Here's an in-depth explanation to clarify the nuances:

Height of an Inline Box

Inline elements create inline boxes defined by line-height:

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

So, if you set line-height to 15px for an inline element, its box height will be 15px.

Height of a Line Box

However, line boxes encompassing inline boxes also have a defined height:

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

For inline boxes with equal line-heights and vertical alignment, the line box's height equals line-height. So, in this case, the line box height is also 15px.

Height of the Content Area of an Inline Box

The developer tools of browsers often display the height of the content area within the inline box. This height is usually determined by the font's maximum ascender and descender:

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

As a result, the content area height can vary and may be larger than the line-height, even when the font-size is set to the same value as the line-height.

In summary, the various heights associated with inline elements include:

• The inline box height is determined by line-height.
• The line box height is also determined by line-height for inline boxes with equal line-heights and vertical alignment.
• The content area height is determined by the font's maximum ascender and descender.

The above is the detailed content of How Does Line-Height Affect the Height of Inline Elements and Their Boxes?. For more information, please follow other related articles on the PHP Chinese website!