letter-spacing and word-spacing — CSS Technical Interview Questions & Answers

Fine-tuning horizontal text spacing.

letter-spacing and word-spacing

  • Fine-tuning horizontal text spacing.
  • letter-spacing and word-spacing is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { letter: …; }
  • 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 letter-spacing and word-spacing is about space, draw the box.

Technical Interview Tip: letter-spacing and word-spacing: one rule on .card, then say what changed.

Code Examples for letter-spacing and word-spacing

letter-spacing and word-spacing — working example

.eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loose {
  word-spacing: 0.25rem;
}

.tight-tracking {
  letter-spacing: -0.02em;
}

letter-spacing and word-spacing — letter-spacing adjusts space between characters; word-spacing adjusts space between words.

How to Explain letter-spacing and word-spacing to an Interviewer

What does letter-spacing and word-spacing do?

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