Skip to content
Back to CSS boxes and browser inspection
PricingLog in

Web development

CSS length units

Pixels, percentages and relative font units respond differently to their context.

5 minutes. No sign-up needed.

What you'll learn4 ideas
  • A length in px ignores the space and text around it, though page zoom still enlarges every CSS pixel.
  • A percentage width takes a share of the parent's content area, the containing block, so it changes when that space changes.
  • A length in rem multiplies the html element's font size, so spacing follows the page-wide setting.
  • A padding in em multiplies the element's own font size, while a font-size in em uses the parent's font size.
Chapter 5: CSS boxes and browser inspection7 lessons · 28 min
  1. 1The CSS box model3 min
  2. 2Box sizing3 min
  3. 3CSS length units5 min
  4. 4Block and inline display3 min
  5. 5Inspecting elements and styles4 min
  6. 6Computed styles and box inspection4 min
  7. 7Challenge: CSS boxes and browser inspection6 min
Go to the chapter

This lesson is part of the Web development course.

Example plan3 lessons · 11 min

Box sizing3 min
CSS length unitsCSS boxes and browser inspection5 min
Block and inline displayCSS boxes and browser inspection3 min

An example. Your plan follows your answers, so it can start later and end sooner.

Build my plan

Start free, no account needed.