Learn the basics behind the line-height property in CSS, including what it is, when to use it, and how to use it most effectively.
Join the DZone community and get the full member experience.Join For Free
The CSS property line-height defines the amount of space used for lines, most commonly in the text.
It is often confused with line spacing (leading) used in Photoshop and similar software.
Leading is a term that describes the distance between the baselines in the text. In the case of defining leading, space is always added below the text. But, when working with line-height property, space is always added equally above and below the text.
Line-height uses several different types of units:
- unitless number.
It’s important to mention that the unitless value is, basically, just a percentage. So, if the line-height has a property of 1.2, it means it just has a value of 120%.
Importance of Line-Height
The most important use of line-height is making your text readable. It is recommended to use unitless values of any other unit that isn’t static like the px unit.
If there is a need to set the font size and line-height at the same time, there is a handy CSS shorthand:
By using this shorthand you will be able to set 3 elements at the same time:
The line-height property applies only to elements that have their display property set to inline or inline-block. If the line-height is set on a block element, there might be some changes, but it is probably just the inline child elements that have been affected.
If you set the line-height without a unit, the result is the line-height value multiplied by the element’s font-size.
I hope this article helped clarify the meaning and usage of the line-height property.
Thank you for reading!
Opinions expressed by DZone contributors are their own.