Menu
Fundamentals
CSS Units
Understand relative (em, rem, %) vs absolute (px) units.
1Absolute vs Relative
Pixels (px) are absolute. REM and EM are relative to font size. Percentages (%) are relative to parent size.
Example Code
css
div {
font-size: 16px; /* Absolute */
}
p {
font-size: 1.5rem; /* 1.5 x root font size */
width: 50%; /* Half of parent width */
}2Understand it in a real interface
Choose a unit according to what should control the size. Rem relates to the root font size, while em can relate to the element’s font size and is context-dependent. Percentage behavior depends on the property and its containing context; it is not simply a universal percentage of the parent.
3Try it yourself
Give a card rem-based padding and an em-based icon size. Increase the root font size, then only the card’s font size, and compare the changes. Add a percentage width and inspect which containing box supplies the available width.
Finished reading?
Mark this topic as complete to track progress.