CSS Units

Choose a unit based on what should control the size

1. Four common units

These examples use the same properties with different units.

180px

px

A deliberate CSS reference-pixel size.

70%

%

Usually relative to the containing block.

12rem

rem

Relative to the root font size.

12em

em

Relative to the current font-size context.

2. em can compound

The parent uses 1.25em. Its nested child uses 1.2em, so the effects multiply.

Parent: font-size 1.25em; padding 1em

Child: font-size 1.2em; padding 1em

3. rem stays rooted

This child uses rem, so nesting does not compound its unit reference.

Parent still uses em

Child: font-size 1rem; padding 1rem

Important CSS

Compare absolute and relative font and spacing units.

.px-sample { font-size: 16px; }
.em-sample { font-size: 1.25em; }
.rem-sample { font-size: 1.25rem; }