There many CSS properties that require size units:
font-sizedefines the size of the textborder-widthdefines the weight of element bordersmargindefines the spacing between elementsleft/right/top/bottomallows to position and move elements
The most used units are:
pxfor pixels%for percentageemfor sizing relative to the parent’sfont-sizevalue.
Pixels
Because computer screens use pixels to display the content, it is the most common size unit in CSS.
It can be used to fix the width of an element:
body{ width: 400px;}Or set the text size:
body{ font-size: 20px;}Pixels in CSS are straightforward because they define absolute values: they are not affected by other inherited CSS properties.
They are also widely used for positioning and spacing purposes.
Percentages
Percentages are relative units: they rely upon the element’s parent and/or ancestor.
For example, block-level elements like paragraphs naturally take up the whole width available. The following CSS rule will resize them to half of the width available.
p{ width: 50%;}Percentages can help set other CSS properties, like text size:
strong{ font-size: 150%;}<p>There are <strong>important</strong> challenges ahead of us.</p>There are important challenges ahead of us.
Em
em is a relative unit: it depends upon the value of the element’s font-size.
For example, if the parent has a font-size of 20px and you apply font-size: 0.8em to a child element, this child element will render a font-size of 16px.
Don’t confuse the em CSS size unit and the em CSS selector, which targets <em> HTML elements
The em unit is interesting as you define font sizes of HTML elements relative to one another. To design a pleasing and easy to read webpage, you need consistent visual depth. For example, you want your <h1> to be twice as big as your body text, your <h2> only 1.5 times as big, and your sidebar slightly smaller. This could easily be achieved in CSS:
body{ font-size: 16px;}
h1{ font-size: 2em;} /* = 32px */
h2{ font-size: 1.5em;} /* = 24px */
aside{ font-size: 0.75em;} /* = 12px */If you decide to change the size of your body text, the relative sizes of your headings and sidebar will change accordingly, and your webpage will remain visually balanced.
By just changing one value, all other values are altered:
body{ font-size: 20px;}
h1{ font-size: 2em;} /* = 40px */
h2{ font-size: 1.5em;} /* = 30px */
aside{ font-size: 0.75em;} /* = 16px */Rem
The rem unit is similar to em, but instead of depending upon the parent’s value, it relies upon the root element’s value, which is the <html> element.
html{ font-size: 18px;}
body{ font-size: 1rem;} /* = 18px */
h1{ font-size: 2rem;} /* = 36px */
h2{ font-size: 1.5rem;} /* = 27px */The difference between rem and em is that rem values are fixed while em values can multiply between each other.
If you set your html{ font-size: 18px;}:
2remwill always be equal to36px, no matter where you use in your CSS2emwill always be equal to double the parent’sfont-size, so not necessarily36px
Quick example where 2em is different from 2rem:
html{ font-size: 20px;}
p{ font-size: 0.8rem;} /* = 16px */
p span{ font-size: 2em;} /* = 16px * 2 = 32px */
p strong{ font-size: 2rem;} /* = 20px * 2 = 40px */The span rely upon the p font-size value while the strong rely upon the html font-size value.
Which unit to use?
I’d recommend pixels to start with: as they’re absolute values, they aren’t affected by the element’s context. They are straightforward, allow to set the text size, image dimensions, border width, position coordinates…
Percentage and em values can be used alongside pixels, for relative text sizes especially.
