Mastering CSS `line-height`: Controlling Vertical Spacing Between Text Lines
Learn how to effectively control the spacing between lines of text in your CSS using the `line-height` property. This tutorial explains different `line-height` values, their effects on text rendering, and how to use them to create visually appealing and well-spaced text layouts.
Understanding CSS `line-height`
The CSS `line-height` property controls the spacing between lines of text within an element. It determines the minimum height of line boxes and affects the vertical spacing of inline elements.
How `line-height` Works
It sets the vertical distance between baselines of adjacent lines of text. This impacts the overall vertical space occupied by text within an element, making it taller or shorter. You can set `line-height` independently of the font size.
`line-height` Values
The `line-height` property accepts several values:
| Value | Description |
|---|---|
normal |
(Default) A default line height, usually around 1.1 to 1.2 times the font size. |
number (e.g., 1.5) |
A unitless number that multiplies the font size to determine the line height. For example, `line-height: 1.5;` would make the line height 1.5 times the font size. |
length (e.g., 20px) |
Sets the line height to a specific length (pixels, points, ems, etc.). |
% (e.g., 150%) |
Sets the line height as a percentage of the font size. |
initial |
Resets the property to its default value (normal). |
inherit |
Inherits the value from its parent element. |
Example: Adjusting Line Height
This example shows text with different line heights. (The "Test it Now" section below is a placeholder. You would need to create an HTML page with headings styled using different line-height values to see the actual visual result.)