What is the difference between the height property and the line-height property in CSS?

The fundamental distinction between the CSS `height` and `line-height` properties lies in their governing scope and primary function: `height` controls the vertical dimension of an element's entire content box, while `line-height` specifically dictates the vertical rhythm and spacing of text lines within that box. The `height` property is a core component of the CSS box model, setting an explicit or minimum/maximum vertical space for the element's entire rectangular area, inclusive of its content, padding, and border (but not margin). It is a layout-centric property that applies universally to block-level and replaced elements, defining their footprint on the page. In contrast, `line-height` is a typographic property that influences the rendering of inline content, particularly text. It defines the height of a line box by establishing the minimum distance between the baselines of successive lines of text, thereby controlling leading. This property is crucial for readability and vertical alignment within inline and inline-block contexts.

Mechanically, `line-height` operates on a different layer than `height`. For a block container containing inline content, the actual height of the element is often determined by the stack of these line boxes, not directly by a declared `height`. If a `height` value is set that is smaller than the total height required by the line boxes, text may overflow or be clipped depending on the `overflow` property. Conversely, if `height` is larger, the element will simply have extra vertical space that the text lines do not occupy. The `line-height` value can be unitless (a multiplier of the element's own `font-size`), a length (e.g., `24px`), a percentage, or the keyword `normal`. A unitless value is generally preferred for scalability, as it is inherited by child elements as a multiplier of their respective font sizes, whereas length values are inherited as fixed computations.

The practical implications are most evident in text alignment and vertical centering. A common technique to vertically center a single line of text within a block of a known `height` is to set the `line-height` of the text to equal that `height` value. This works because the text is positioned within its line box, and the `line-height` effectively distributes space above and below the glyphs. However, this method breaks down for multi-line text, as the same `line-height` applies to every line, potentially causing an overall height that exceeds the container's declared `height`. For multi-line content, managing vertical space typically involves adjusting `line-height` and `padding` while often avoiding a fixed `height` to allow for natural flow. Furthermore, `line-height` directly impacts the background area of inline elements and the alignment of inline-block elements adjacent to text, areas where the `height` property has no direct influence.

In summary, conflating these properties leads to common layout issues. Using `height` on text elements for spacing control is usually a mistake, as it creates a rigid container that does not adapt to font changes or wrapping text. Proper typographic design relies on `line-height` to set comfortable reading rhythm, while `height` is reserved for defining structural containers, image dimensions, or explicit layout grids. Understanding that `line-height` contributes to the calculation of an element's automatic height, rather than being subordinate to a declared `height`, is key to predictable CSS formatting.