How Does Line-Height Affect the Height of Inline Elements?

Line-Height in Inline Elements Explained

Inline elements have different measurements for height depending on the context. Here's a detailed breakdown:

Height of an Inline Box

An inline box is the rectangular area that contains the content and half-leading of glyphs. Line-height determines the height of this box, which is the same as the line-height value in most cases.

Height of a Line Box

A line box encompasses a row of inline boxes. If all inline boxes have the same line-height and vertical alignment, the height of the line box is also determined by the line-height.

Height of the Content Area of an Inline Box

The content area of an inline box is the area where text and other elements are displayed. This area may differ from the inline box height depending on the implementation of the user agent (browser).

Most browsers base the content area height on the tallest glyph in the font-family and font-size combination. This can lead to the content area being larger than the line box height.

Font-Size and Content Area Height

While font-size (15px in your example) determines the em-box height, it doesn't guarantee a 15px content area height. This is because browsers make adjustments based on the font's characteristics.

For instance, in your case, the browser calculated the content area height as 18px for the "Verdana" font and 17px for the "sans-serif" font, even though you set font-size to 15px. These values fall within the "reasonable" range of 1.0 to 1.2 times the font-size.

Background Color and Line-Height

The height of the background color in inline elements does not align with the line-height because it only extends to the content area height. This explains why the green background in your example is only 18px tall, despite the line-height being 15px.

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