What does line-height: 1 or line-height: 1.5 means in CSS

date
Nov 20, 2021
slug
line-height-value-meaning
status
Published
tags
CSS
summary
type
Post
It's confusing to see a unitless number in a place where all kinds of units are being used to specify dimensions. In CSS we use units like px, em, rem, vh, vw, etc to name a few. But weirdly line-height can have a unitless number as its value.

So what does the unitless value actually mean?

Well, it's pretty straightforward. The unitless number is the multiplier to the current font-size value to decide our new line-height value.
 
For example:
If we have current font-size of 15px.
And if line-height: 1 then the final value is
line-height = 15px * 1 = 15px
similarly if line-height: 1.5 then the final value will be
line-height = 15px * 1.5 = 22.5px
 

© Nikit Singh 2020 - 2021