In CSS every property must have some value. Sometimes it’s a path, sometimes it’s color, sometimes it’s a string, but sometimes it’s 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:
vw, etc. We can divide all these units into two groups:
- Absolute units
- 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 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.
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
in are always the same, we can use
@media print query to implement those CSS units only when printing.
There are also
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.
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 parent’s 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
30% tall, which equals to
See the Pen % example by Amer Sikira (@amersikira) on CodePen.
em units and
rem units are almost the same. Difference is that
em is relative to element’s
rem are relative to the root element’s
1em is equal to 100% of element’s
font-size. So, if element’s
1em is same.
2em inside same element means
em for font-size property may not be the best idea, but using
em for margins, paddings and widths is good.
1rem is equal to
100% of root element’s
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). Let’s say we have a user who changed (in browser) root’s 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.
ch CSS units are base on the
font-size. However, these units are also relative to
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 freeCodeCamp’s 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 stands for line-height, and
rlh stands for root line-height. Same as
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
1rlh is equal to 20px, depends if we are talking of the element’s line height or the root element’s line height. These units are useful for aligning icons with text, according to the css-tricks.com article.
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 screen’s width, regardless of screen size and resolution. The same goes for
vh. Element of
50vh will take 50% of the screen’s 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.
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
1vmin is 7.2px and
1vmax is 10.8px.
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
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.