CSS units play a crucial role in web development, allowing developers to control the size, positioning, and layout of website elements. While there are several variants available, such as pixels (px), percentage (%), em, rem, or viewport units; it's important to note that the list of CSS units is extensive.

In this article, we will simplify the vast world of CSS units by dividing them into two key categories: absolute and relative. As we explore these categories, you'll find an invaluable reference that helps you choose the most suitable unit for a specific design requirement.

"Absolute" Units

Absolute units are fixed and do not change their values. The most commonly used ones are pixels and points. Here's a quick reference table:

Unit	Name	Equivalent
`cm`	Centimeters	2.54 cm = 1 in
`mm`	Millimeters	10 mm = 1 cm
`q`	Quarter-millimeters	40 Q = 1 cm
`in`	Inches	1 in = 2.54 cm = 96 px
`pc`	Picas	6 pc = 1 in
`pt`	Points	72 pt = 1 in
`px`	Pixels	96 px = 1 in

Using the conversion values provided in the table, you can easily convert between these units. For example, to convert 12px to centimeters (cm), you can use the following calculation:

$${\color{orange}12}\cancel {px}\times\frac{1\cancel{in}}{{\color{orange}96}\cancel {px}}\times\frac{\color{orange}2.54\color{green}cm}{1\cancel{in}}=12\div96\times2.54=0.3175cm$$

It's worth noting that certain "absolute" units may not be strictly absolute in today's web development context. For instance, if you create a div with a height of "1in" and measure it on the screen(with a simple ruler), you'll find that it's not precisely 1 inch. Despite an interesting historical background, it's unusual today to use any "absolute" units beyond pixels (px).

Additionally, I have created a web project at https://jhordyess.github.io/css-units/ that allows you to convert between these absolute units and provides an option for precise conversions using the diagonal length of a screen.

Relative Units

Relative units, on the other hand, are designed to adapt to their parent. They provide flexibility and responsiveness, making it easier to create websites that adjust to different screen sizes and resolutions.

One commonly used relative unit is the percentage (%). It allows elements to be sized relative to their parent containers.

Another significant relative unit is fr. The flexible unit/fraction is used in conjunction with flex or grid elements.

However, there are 3 main categories of relative units: font-relative units, viewport units, and container query units, let's explore them.

Font-Relative Units

CSS provides several font-relative units that are based on specific font properties. Here's their reference table:

Unit	Relative to
`em`	The inherited `font-size`.
`ex`	The height of the letter "x" in the inherited font
`cap`	The height of a capital Latin letter in the inherited font.
`ch`	The advance measure of the character “0” in the inherited font.
`ic`	The advance measure of the water ideograph "水" in the inherited font.
`lh`	The inherited `line-height`.

Additionally, you can make these font-relative units relative to the root element of your HTML, here are the units relative to the root element:

Unit	Relative to
`rem`	The `font-size` of the root element (default: `16px`).
`rex`	The height of the letter "x" in the root element.
`rcap`	The height of a capital Latin letter in the root element.
`rch`	The advance measure of the character "0" in the root element.
`ric`	The advance measure of the water ideograph "水" in the root element.
`rlh`	The `line-height` of the root element (default: `1.2`, in most cases).

💡

The root element of a web page is <html>, so by customizing the values of the <html> element, the above relative values can be changed.

Viewport Units

Viewport units are particularly useful when the sizing needs to be relative to the browser size or viewport itself. Here are the available viewport units:

Unit	Name	Relative to
`vw`	Viewport width	The viewport width.
`vh`	Viewport height	The viewport height.
`vi`	Viewport inline	The `vw` in a horizontal(default) writing mode and `vh` in a vertical writing mode.
`vb`	Viewport block	The `vh` in a horizontal(default) writing mode and `vw` in a vertical writing mode.
`vmin`	Viewport minimum	The minimum between `vw` and `vh`.
`vmax`	Viewport maximum	The maximum between `vw` and `vh`.

💡

Note that the terms "inline" and "block" are part of the flow layout and can also be applied to logical properties in CSS.

Viewport units have two variants: the small and large viewport units. These are primarily used to support mobile browsers where the visibility of dynamic toolbars can alter the viewport size. Additionally, there exists a dynamic viewport that dynamically changes between the small and large viewport based on the visibility of the dynamic toolbar.

To differentiate between these viewports, you can use the prefixes "s", "l", and "d" as necessary. The prefixes indicate the desired viewport size. Here's a table illustrating the usage:

Unit	Small	Large	Dynamic
`vw`	`svw`	`lvw`	`dvw`
`vh`	`svh`	`lvh`	`dvh`
`vi`	`svi`	`lvi`	`dvi`
`vb`	`svb`	`lvb`	`dvb`
`vmin`	`svmin`	`lvmin`	`dvmin`
`vmax`	`svmax`	`lvmax`	`dvmax`

Container query units

These units are used specifically within container queries. Container queries allow you to apply styles based on the size of an element. They are an alternative to media queries. Similar to viewport units, there are six container query units, corresponding to the viewport units. Here's the list of container query units:

Unit	Relative to
`cqw`	The width of the query container.
`cqh`	The height of the query container.
`cqi`	The `cqw` in a horizontal(default) writing mode and `cqh` in a vertical writing mode.
`cqb`	The `cqh` in a horizontal(default) writing mode and `cqw` in a vertical writing mode.
`cqmin`	The minimum between `cqw` and `cqh`.
`cqmax`	The maximum between `cqw` and `cqh`.

Outro

Finally! We've explored the extensive range of CSS units, from the traditional 'absolute' units to the relative units including font-relative units, viewport units, and container query units.

By using the right unit for each scenario, you can have better control. Feel free to try out different CSS units and let your imagination run wild with your amazing web projects!

Exploring CSS Units: A Comprehensive Reference Guide