CSS – EM vs REM vs PX

Not CSS3 specific, but here’s an example of how EM and REM size differently according to their containers.

EM

This is 1em

This is 2em

This is 3em

This is 4em

This is 5em

REM (when base is 16px)

This is 1rem

This is 2rem

This is 3rem

This is 4rem

This is 5rem

PX

This is 8px

This is 10px

This is 12px

This is 14px

This is 16px

This is 18px

This is 20px

This is 24px

EM in an EM

This text is 2EM
and this is 0.5em
and this is 3em

But wait, that 0.5em is the same as 1em up top, and the 3em is bigger than 5em up top!

YES IT IS, because EM sizes relative to it’s PARENT!

REM in an EM

This text is 2EM
and this is 0.5rem
and this is 3rem

Hey look, now it’s the size that I expect it to be!

YES IT IS, because REM sizes relative to the ROOT element (which is set to 16px for this example)