Part of Series: CSS Handbook

CSS Units

📣 Sponsor

There are so many units in CSS these days, that it is hard to keep track, yet they're critical to laying out web pages. There have also been additional new units which have garnered a lot of browser support in recent years, making it easier to create with CSS, that many aren't aware of.

Let's take a look at CSS' unit and how to use them.


Declared using px, this is the most basic unit. Any CSS property which accepts a number or distance on a page, usually accepts pixels. However, it's not always the best choice. Here is an example:

div { width: 10px; }


Another common unit is %, which refers to a portion of the elements with or height, depending on the direction you are going in. Note, height will not always work as expected, i.e. height: 50%; on a body element will not make a 50% height page, unless a height is explicitly defined.

div { width: 50%; }


1em refers to font size of the curent element, while 1rem refers to the font size at the base of the document. So if the body tag has a font size of 16px, then 1rem means 16px.

Using both has their uses. Using em let's us easily make objects bigger just by changing their font size, and everything else should scale appropriately. These don't just refer to font sizes though, they can be used on any property, i.e. width:

div { width: 5rem; }

These properties are already way better than just using pixels, since now you can scale entire documents using just font-size, which makes accessibility a breeze. It also means, should a screen reader override the default root font size, your page will automatically adjust.



Traditional Units

We can also use more traditional units on web pages such as centimetres. Note, I would not recommend using these for web designs, but rather perhaps for prints or non-web design related CSS. That is because browsers and devices determine the definitions of these based on their own definitions of pixel density, which makes things very complicated.

Unit Definition
cm Centimetres
mm Milimetres
Q Quarter-Millimetres
in Inch, typically 96px
pt Points, or 1/72 inch
pc Picas, or 1/6 inch
in Inch

In Code:

div { width: 1.5cm; }

Viewport Width/Height Measurements

Perhaps one of the most useful units, and a more recent addition to CSS, vh and vw refer to 1% of the viewport's width and height respectively. Therefore a value of 100vw will refer to the entire width of the current viewport.

The below div is the full width and height of the current viewport:

div { width: 100vw; height: 100vh; }


vmin and vmax refer to the minimum or maximum value out of the viewport width or height. So if the viewport width is larger, then 100vmax will refer to the full width of the viewport. This obviously depends on a window being resized.


In CSS, it is often desirable to combine different units of measurement. One that I find myself using a lot is 100% of the width minus, say, 1rem. This can be achieved with calc(), which accepts subtraction, addition, division or multiplication. A few examples are given below:

div { width: calc(100% - 5rem); height: calc(100vh / 2); } p { width: calc(10rem * 5); height: calc(5rem / 5); }

Please note that in some browsers, spacing is important. So make sure you have spaces between the operators and the numbers, i.e. 100% - 5rem, not 100%-5rem.

Last Updated 1617479293661

More Tips and Tricks for CSS

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email