CSS Units Guide, everything you need to know

This article was originally published on webinuse.com
In CSS every property must have some value. Sometimes its a path, sometimes its color, sometimes its a string, but sometimes its a measurement unit. Today we are talking about the CSS units for measuring the length, width, and height of an element.

There are a lot of CSS units that can be used for measurement, like: px, em, rem, vh, vw, etc. We can divide all these units into two groups:

1. Absolute units
2. Relative units

1. Absolute CSS units

Absolute units are the same on any device, regardless of size and settings. Depending on the purpose of our design we may use different units. Since they are not scaling with device size, absolute CSS units are not good for responsive design, while they are excellent for print.

px

px stands for pixel and the visual size of a pixel varies depending on the screen resolution and quality. So 16px is not, visually, the same size on every screen. E.g. take bigger screens like 27 or larger with 2560x1440px or even higher resolutions. If our text is 16px it will seem much smaller than it really is, and as a result, our UI might seem broken, which, then, affects UX.

Regardless of this fact, a lot of developers still use px as their standard unit of measurement.

mm/cm/in

We know these units from the real world, and it is not often that we see them used in the web world. But, these units are excellent for preparing our page for print. Because mm, cm, in are always the same, we can use @media print query to implement those CSS units only when printing.

pt/pc

There are also pt (point), pc (pica) units, which are rarely used. 1pt is 1/72 of an inch and 1pc 12 points.

NOTE: Even though mm, cm, in, pt, pc are physical units there is no real guarantee that 1cm in CSS will be equal to 1cm on paper. Regardless, those units are better for printing than others we are going to talk about.

See the Pen Absolute CSS units by Amer Sikira (@amersikira) on CodePen.

2. Relative CSS Units

Unlike Absolute units, Relative units change depending on screen size and/or settings. Relative units are excellent for creating responsive design and they are excellent for screens, bad for printing.

Percentage (%)

What px is to absolute units, % is to relative units. We can call this a legacy unit. They are pretty easy to use. 1% refers to 1% of parents size.

In the example below, we have div#parent that is 400px wide and 200px tall. We also have div#child that is 25% wide, which equals to 125px and 30% tall, which equals to 60px.

See the Pen % example by Amer Sikira (@amersikira) on CodePen.

em/rem

em units and rem units are almost the same. Difference is that em is relative to elements font-size, while rem are relative to the root elements font-size.

em

1em is equal to 100% of elements font-size. So, if elements font-size is 30px than 1em is same. 2em inside same element means 60px. Using em for font-size property may not be the best idea, but using em for margins, paddings and widths is good.

rem

1rem is equal to 100% of root elements font-size. Standard font-size built-in browser is 16px if you do not change it, and we will see in a moment why it is not smart to change it.

Rem unit is excellent for responsive design and it is excellent for accessibility (this is why we should not change root font-size). Lets say we have a user who changed (in browser) roots font-size from 16px to 25px. If we used rem, our design will scale accordingly, and our UI will be intact, hence our UX will be the same for every user.

ex/ch

Similar to em and rem, ex and ch CSS units are base on the font-size. However, these units are also relative to font-family. ch stands for character unit and it is defined by the width of character 0. The ex unit is defined as the current x-height of the current font or the half of 1em, as per this freeCodeCamps article. The height-x of a given font is the height of the lowercase x of that font. It is often the middle mark of the font.

lh/rlh

lh stands for line-height, and rlh stands for root line-height. Same as em and rem, lh is equal to the computed value of line-height of the element, while rlh is equal to the computed value of line-height of the root element. If line-height: 20px then 1lh or 1rlh is equal to 20px, depends if we are talking of the elements line height or the root elements line height. These units are useful for aligning icons with text, according to the css-tricks.com article.

vw/vh

vw stands for viewport width and vh stands for viewport height. This means that these units depend on the screen size. Element of 50vw will take 50% of the screens width, regardless of screen size and resolution. The same goes for vh. Element of 50vh will take 50% of the screens height, regardless of screen size and resolution. We can use this for the width of the sections, which can prove like an excellent choice for responsive design.

vmin/vmax

Unlike vw and vh, vmin and vmax rely on the maximum width and a minimum height of the screen, or vice versa. For example, if screen size is 1920px by 1080px, then 1vmax is 19.2px and 1vmin is 10.8px.While, if the screen is 720px by 1080px, then 1vmin is 7.2px and 1vmax is 10.8px.

To calculate vmin and vmax we take screen size and then divide both width and height by 100. Whichever is smaller that is 1vmin and whichever is larger it is 1vmax.

Conclusion

There are more units that we have not discussed here. We chose these units because they are, either, common or useful. Almost any of these units will do the job. But there are some units that are better for some things than others. For additional information on CSS units, we can use Level 4 spec for CSS values.

If you have any questions or anything you can find me on myTwitter, or you can read some of my other articles likeHow to merge objects in JavaScript?