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. |
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!
Useful Links
