Exploring CSS Units: A Comprehensive Reference Guide

Photo by Jess Bailey on Unsplash

Exploring CSS Units: A Comprehensive Reference Guide

Navigating CSS Units: Absolute, Relative, and Beyond

·

6 min read

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:

UnitNameEquivalent
cmCentimeters2.54 cm = 1 in
mmMillimeters10 mm = 1 cm
qQuarter-millimeters40 Q = 1 cm
inInches1 in = 2.54 cm = 96 px
pcPicas6 pc = 1 in
ptPoints72 pt = 1 in
pxPixels96 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:

UnitRelative to
emThe inherited font-size.
exThe height of the letter "x" in the inherited font
capThe height of a capital Latin letter in the inherited font.
chThe advance measure of the character “0” in the inherited font.
icThe advance measure of the water ideograph "水" in the inherited font.
lhThe 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:

UnitRelative to
remThe font-size of the root element (default: 16px).
rexThe height of the letter "x" in the root element.
rcapThe height of a capital Latin letter in the root element.
rchThe advance measure of the character "0" in the root element.
ricThe advance measure of the water ideograph "水" in the root element.
rlhThe 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:

UnitNameRelative to
vwViewport widthThe viewport width.
vhViewport heightThe viewport height.
viViewport inlineThe vw in a horizontal(default) writing mode and vh in a vertical writing mode.
vbViewport blockThe vh in a horizontal(default) writing mode and vw in a vertical writing mode.
vminViewport minimumThe minimum between vw and vh.
vmaxViewport maximumThe 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:

UnitSmallLargeDynamic
vwsvwlvwdvw
vhsvhlvhdvh
visvilvidvi
vbsvblvbdvb
vminsvminlvmindvmin
vmaxsvmaxlvmaxdvmax

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:

UnitRelative to
cqwThe width of the query container.
cqhThe height of the query container.
cqiThe cqw in a horizontal(default) writing mode and cqh in a vertical writing mode.
cqbThe cqh in a horizontal(default) writing mode and cqw in a vertical writing mode.
cqminThe minimum between cqw and cqh.
cqmaxThe 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!