A unitless line-height
value in CSS is always calculated relative to the font-size
of the element to which it is applied. It is computed by multiplying the line-height
value by the element's font-size
(i.e. line-height
* font-size
).
For example:
p { font-size: 16px; line-height: 1.5; /* 1.5 * 16px = 24px */ }
In this example, the computed line-height
value is 24px
because that's what you get by multiplying the element's font-size
of 16px
with the line-height
of 1.5
.
When a font-size
is specified with any valid CSS unit, the unitless line-height
will be computed relative to that font-size
, and it will adopt the same unit of measure. For instance, when the font-size
is specified using "em
", the unitless line-height
will be computed relative to the font-size
in "em
" and will also be expressed in "em
":
p { font-size: 2em; line-height: 1.5; /* 1.5 * 2em = 3em */ }
This will make the spacing between lines 3
times the size of the font.
In general, when the line-height
is set to a unitless value, it is interpreted as a multiple of the element's font-size
. This means that the spacing between lines of text will be proportional to the font size, rather than being of a fixed size.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.