A unitless numeric value, like line-height: 1.5, is generally the recommended approach, since it's calculated as a multiple of the element's own font-size and is inherited as that unitless ratio to descendants, meaning nested elements with a different font-size still get a proportionally scaled line-height rather than inheriting a fixed pixel value that wouldn't scale correctly. Setting line-height equal to a fixed pixel height matching an element's total height, like line-height: 50px on a 50px-tall single-line element, is also a classic technique for vertically centering a single line of text within that element.
1Understanding Line-height
A unitless numeric value, like line-height: 1.5, is generally the recommended approach, since it's calculated as a multiple of the element's own font-size and is inherited as that unitless ratio to descendants, meaning nested elements with a different font-size still get a proportionally scaled line-height rather than inheriting a fixed pixel value that wouldn't scale correctly. Setting line-height equal to a fixed pixel height matching an element's total height, like line-height: 50px on a 50px-tall single-line element, is also a classic technique for vertically centering a single line of text within that element.
Prefer a unitless line-height value, like 1.5, over a fixed pixel or percentage value — a unitless value is inherited as a ratio and recalculates correctly against each descendant's own font-size, while a fixed value inherits as that same fixed size regardless of a nested element's different font-size.
p {
font-size: 16px;
line-height: 1.6;
}2Practical Example
Here is a real-world application of Line-height showing how it is used in production CSS code.
.button {
height: 50px;
line-height: 50px;
text-align: center;
}3Best Practices
Follow these guidelines when working with Line-height:
1. Use a unitless line-height value, like 1.5 or 1.6, as the default choice, since it scales correctly and predictably with each element's own font-size, including for nested elements with different sizes
2. Set line-height equal to a container's fixed height to vertically center a single line of text within it, a simple, classic centering technique
3. Increase line-height for large blocks of body text, typically to somewhere between 1.4 and 1.8, to improve readability compared to a font's often-cramped default line-height
Tip: Prefer a unitless line-height value, like 1.5, over a fixed pixel or percentage value — a unitless value is inherited as a ratio and recalculates correctly against each descendant's own font-size, while a fixed value inherits as that same fixed size regardless of a nested element's different font-size.
p {
font-size: 16px;
line-height: 1.6;
}