Have you ever come across a situation where you used a paragraph element and you had no idea how it took more height or less. Well, in this article we are going to look at what line height does behind the scenes.
What is a line height?
Line height is a CSS property which defines the height of a line box i.e. : the amount of space above and below an inline element . It is commonly used to set the vertical distance between two or more lines of text.
The below image has a line height of 1.2. We can define line height in many ways. We are going to look at all the possible ways to define line height and at last we will find out the best way to define line height
Normal
line-height: normal ;
This is the default line height definition in most browsers. Normal has a rough value of 1.2 which can slightly vary from browser to browser and also the it depends on the element's font-family.
Number (unitless)
line-height: 1 ;
This takes the defined value multiplied by the font-size. This is the most preferred way and we are going to look why at the end of this article.
Length
line-height: 16px;
The specified length is used to calculate the line height. Any unit such as px, em, rem etc can be used.
Percentages
line-height: 150%;
Percentage is calculated relative to the font-size of the element itself.
The best way to specify the line height property
Unitless line heights are recommended because the child elements will inherit the raw number value, rather than the computed value. Therefore, the child elements can calculate their line heights based on their computed font-size rather than inheriting unintended value from the parent that might produce unexpected results.