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.

Pixels

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;
}

Percent

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%;
}

em/rem

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.

ch/ex

These

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/vmax

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.

Calculations

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