line-height — CSS Technical Interview Questions & Answers

Vertical spacing between lines of text.

line-height

  • Vertical spacing between lines of text.
  • line-height is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { line: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If line-height is about space, draw the box.

Technical Interview Tip: line-height: one rule on .card, then say what changed.

Code Examples for line-height

line-height — working example

.body {
  font-size: 1rem;
  line-height: 1.6; /* unitless = relative to font-size */
}

.heading {
  font-size: 1.5rem;
  line-height: 1.25;
}

.tight {
  line-height: 1;
}

line-height sets the line box height; unitless values scale with the element's font-size.

How to Explain line-height to an Interviewer

What does line-height do?

A CSS property that changes look/layout Write it in a rule and refresh