Line-Height and Inline Elements: A Deeper Dive

Understanding line-height behavior in inline elements can be puzzling. Despite thorough research, some key aspects remain unclear. This guide delves deeper into the subject to answer the following questions:

1. Inconsistency Between Font-Size and Measured Height:

An inline element with a font-size of 15px displays a height of 18px in browser developer tools. This occurs because:

• Height of Inline Box: The line-height property determines the height of the inline box, which encloses all glyphs and their half-leading on each side. In this case, the box height is 15px.
• Content Area Height: The developer tools report the height of the content area, which typically exceeds the line-height due to variations in glyph sizes within a font.

2. Background Color not Matching Line-Height:

The inline element's background color does not align with the line-height because:

• Line Box Height: In addition to inline boxes, there are also line boxes. The height of a line box is determined by the line-height and includes only those inline boxes sharing the same line-height and vertical alignment. In this example, the line box height is also 15px.
• Content Area Height: The background color is applied to the content area, which corresponds to the height of the tallest glyph in the used font and size. This value can vary depending on the font characteristics and is not directly related to the line-height.

Note: The CSS specification does not explicitly define the algorithm for calculating content area height, leaving it to the interpretation of user agents.