CSS · Layout and visual systems
How does line-height work and why is unitless better?
Short answer
line-height sets the height of a line box. A unitless value is inherited as a multiplier and recomputes per element, while lengths and percentages compute once and can cause cramped or oversized text.
Line height affects the space above and below inline text within a line box. It is not the same as the gap between block elements. A unitless value such as 1.5 means 1.5 times the element's own font size at each level of the tree.
body {
font-size: 1rem;
line-height: 1.5;
}
h1 {
font-size: 3rem;
line-height: 1.1;
}
.small {
font-size: 0.875rem;
line-height: 1.4;
}Why unitless wins
- A unitless number is inherited as a factor and recalculated for each element's font size
- A percentage or em line-height computes at the parent and inherits as a fixed length
- That can make a large heading inherit a body-sized line height, or vice versa
- normal depends on the font's metrics and is not a fixed value
- Single-line text can be vertically centred by matching line height to box height, but multi-line text should not do this
Headings usually need a lower ratio than body copy because their font size is larger. Body text benefits from more generous leading. Tune both together rather than choosing a single global value.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why is unitless line-height inherited differently from a percentage?
- 2What does line-height: normal mean?
- 3How do you vertically center a single line of text?
- 4Why can line-height below 1 clip text?
Say it in the interview
Line-height sets the height of a line box, not the spacing between blocks. I prefer a unitless value because it is inherited as a multiplier and recalculates for each element's font size. A percentage or em computes once and inherits as a fixed length, which often breaks headings. I lower the ratio for large headings and keep body copy more generous.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.