CSS units explained

Every property used in CSS has a value type defining the set of values that are allowed for that property. There are multiple options of units to use when determining the size of CSS properties. Learning all your options is key to have maintainable css code and a great user experience on nearly every screen size.

What is a CSS Unit?

A CSS unit determines the size of a property you’re setting for an element or its content.

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

For example:

p {
  margin: 16px;
}

In this case, margin is the CSS property, 16 is the value and px (or “pixel”) is the CSS unit.

There are different CSS units available, so the next logical question would be, which one to use and when.

Absolute Units || Relative Units

The two main categories to consider, when evaluating the options are absolute and relative units.

Absolute Units

Absolute Units are the same size regardless of the parent element or window size. This means a property set with a value that has an absolute unit will be always that size, on a mobile phone, on a tablet, on a 4k screen - everywhere!

Absolute units can be less favourable for responsive sites, because they don’t scale when the screen size changes.

Hence, they can be very useful when the project doesn't have a responsive requirement, for example desktop-only applications with fixed sizes.

• Pixels (px) are typically the most popular absolute unit for screens.
• Centimeters, millimeters, and inches are more common for print, (print css).

Relative Units

Relative Units are used for styling responsive sites. They scale relative to the parent element or to the window size (depending on the unit, REM vs. EM). When using relative units for styling, you avoid having to update all styles for different screen sizes.

Relative units can either be relative to the parent or relative to the root(window).

There is a controversial discussion going on about the use of EM vs. REM on the web development community.

It’s not always clear which of these options is best to use for each type of CSS property.

For example, % is usually more appropriate for layout-related properties like width than it would be for font-size.

Here are some examples of when you would use each relative unit.

%: You want a child element to have % of the parent’s size (width, height, etc.).

In the example below, the child should have a width of 25% of the parent. If the width of the parent changes, the child width would change as well.

.child {
  width: 25%;
}

em:

em is relative to the font-size of its direct or nearest parent. In the example below we want to have the font in the child to be half the size of its parent’s font-size.

.child {
  font-size: 0.5em;
}

rem:

rem is only relative to the html (root) font-size.

In the code below, the font-size in the footer should be half the size as in the root element's font.

.footer {
  font-size: 0.5rem;
}

ch: You have a mono-spaced font (the characters are always the same width), and you only have space for 10 characters.

.small-text {
  width: 10ch;
}

vh,vw: vh = viewport height, vw = viewport width; This unit is relative to the viewport/window.

For example, the wrapper class should always have 100vh and the hero class should have a width of half the window.

.wrapper {
  height: 100vh;
}
.hero {
  width: 50vw;
}

vmin, vmax: vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh. If the width of the browser is less than it’s height, 1vmin is equivalent to 1vw. vmax is the opposite: it uses the largest side. So 1vmax is equivalent to 1vw if the viewport is wider than it is tall; if the browser is taller than it is wide, 1vmax will be equivalent to 1vh.

.min-width {
  width: 100vmin;
}
.max-width {
  width: 100vmax;
}

ex: The ex unit is used rarely. Its purpose is to express sizes that must be related to the x-height of a font. The x-height is, roughly, the height of lowercase letters such as a, c, m, or o. Fonts that have the same size (and thus the same em) may vary wildly in the size of their lowercase letters, and when it is important that some image, e.g., matches the x-height, the ex unit is available. It’s generally a good measure of a font’s mid-section, so if you want the double the line-height of a lowercase letter.

.double-lowercase {
  line-height: 2ex;
}

TL;DR

• Use relative units, when your project requires responsiveness.
• Do not use print values for the web, besides in print.css.
• Read the official documentation with detailed information W3C CSS Values and Units Module.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.

If you want to know more about CSS, have a look at these Gatsby Tutorials.

References (and Big thanks): W3C, Jess Mitchell, thenewcode