# Exploring CSS Units: A Comprehensive Reference Guide

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](https://www.smashingmagazine.com/2021/07/css-absolute-units/), 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/](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](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure) of the character “0” in the inherited font. |
| `ic` | The [advance measure](https://developer.mozilla.org/en-US/docs/Glossary/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](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure) of the character "0" in the root element. |
| `ric` | The [advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure) of the water ideograph "水" in the root element. |
| `rlh` | The `line-height` of the root element (default: `1.2`, [in most cases](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#normal)). |

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">The root element of a web page is <code>&lt;html&gt;</code>, so by customizing the values of the <code>&lt;html&gt;</code> element, the above relative values can be changed.</div>
</div>

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) and `vh` in a vertical writing mode. |
| `vb` | Viewport block | The `vh` in a horizontal(default) [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/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`. |

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Note that the terms "inline" and "block" are part of the <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow" style="pointer-events: none">flow layout</a> and can also be applied to <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values" style="pointer-events: none">logical properties</a> in CSS.</div>
</div>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries). Container queries allow you to apply styles based on the size of an element. They are an alternative to [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) and `cqh` in a vertical writing mode. |
| `cqb` | The `cqh` in a horizontal(default) [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/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!

![](https://media.giphy.com/media/54r0JH1JY6VPi/giphy.gif align="center")

## Useful Links

* [https://www.w3.org/TR/css-values-4/#lengths](https://www.w3.org/TR/css-values-4/#lengths)
    
* [https://developer.mozilla.org/en-US/docs/Web/CSS/length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)
    
* [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building\_blocks/Values\_and\_units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
    
* [https://web.dev/articles/viewport-units](https://web.dev/articles/viewport-units)
    
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_container\_queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)
    

%%[saltenha]