Skip to content

CSS Units

New Courses Coming Soon

Join the waiting lists

Learn how to work with units in CSS

One of the things you’ll use every day in CSS are units. They are used to set lengths, paddings, margins, align elements and so on.

Things like px, em, rem, or percentages.

They are everywhere. There are some relatively unknown ones, too.


The most widely used measurement unit. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina devices).

There is a convention that make this unit work consistently across devices.


Another very useful measure, percentages let you specify values in percentages of that parent element’s corresponding property.


.parent {
  width: 400px;

.child {
  width: 50%; /* = 200px */

Real-world measurement units

We have those measurement units which are translated from the outside world. Mostly useless on screen, they can be useful for print stylesheets. They are:

Relative units

Viewport units

Fraction units

fr are fraction units, and they are used in CSS Grid to divide space into fractions.

→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: