{{announcement.body}}
{{announcement.title}}

CSS Line-Height

DZone 's Guide to

CSS Line-Height

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.

· Web Dev Zone ·
Free Resource

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

  • px.
  • em.
  • %.
  • 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:

CSS


By using this shorthand you will be able to set 3 elements at the same time:

  • font-size.
  • line-height.
  • font-family.

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.

CSS


I hope this article helped clarify the meaning and usage of the line-height property.

Thank you for reading!

Topics:
css ,frontend ,html ,line-height ,tutorial ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}