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

Understanding Height Determination in Block and Inline Elements

In determining the height of a block or inline element, the line-height property plays a crucial role for block elements specifically in certain contexts.

Block Elements

For block elements, the height of the content box depends on two main scenarios:

1. Inline Formatting Context (IFC): When an element establishes an IFC, the height is defined by the line-height of the element, as seen in the paragraph and div examples. These elements contain a single line box whose height is determined by line-height.

2. Block Formatting Context (BFC): In a BFC, the height is determined by the following sequence:

   • The bottom edge of the last line box in the element (if an IFC is established).
   • The bottom edge of the last in-flow child element's margin (if its bottom margin doesn't collapse with the element's bottom margin).
   • The bottom border edge of the last in-flow child element (if its top margin doesn't collapse with the element's bottom margin).
   • Zero, if none of the above conditions apply.

Inline Elements

Unlike block elements, inline elements do not have a defined height property. The height of the content area is determined by the font properties used, and it is not directly related to line-height.

The specification states that, "A UA may, e.g., use the em-box or the maximum ascender and descender of the font" to determine the height, leaving it to the user agent's discretion.

Note: The content area of an inline element is different from its line box. The vertical padding, border, and margin surrounding the content area are added to it, but only line-height is considered when calculating the line box height.

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