How Does Line-Height Affect the Height of HTML Content-Boxes?

Understanding the Height of Content-Boxes in HTML Elements

In HTML, elements can be categorized as block elements or inline elements. The height of their content-boxes, or the area they occupy on the screen, is determined by different rules.

Block Elements

Block elements, such as div and p, have their height determined primarily by their line-height property. If the line-height is set to a value like 2em, the height of the content-box will be twice the height of the line-height.

This behavior is consistent across all block elements, as illustrated in the following example:

<div>

Inline Elements

Unlike block elements, inline elements, such as span, do not have a height property. Instead, their vertical dimensions are derived from their font properties. The specification does not explicitly define how UAs should determine the height of inline element content-boxes, but they typically use the font's em-box or ascender/descender measurements.

This means that while you can set the line-height on inline elements, it does not directly affect their height. The height will vary based on the font and font size used, as demonstrated below:

<span>

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