Stephanie Eckles

Posted on Feb 15, 2020 • Edited on Jun 6, 2021

Guide to CSS Units for Relative Spacing

#css #webdev

Space Relative to the Document `:root`

Use: rem

Unless you change it, the default rem value is 16px with the advantage of responding to changes in zoom level.

Why and how to use `rem`

rem will not change no matter how deeply it is nested, so for consistent spacing between/around elements, it is a reliable choice.

It is also the preferred measurement for font sizing.

Space Relative to the Viewport

Use: Viewport units

The viewport is the boundary of the browser window or device screen size.

Available viewport units

vh: viewport height - based on the height of the viewport
vw: viewport width - based on the width of the viewport
vmin: viewport minimum - returns the smaller value of vh or vw, updating responsively
vmax: viewport maximum - returns the larger value of vh or vw, updating responsively

Viewport units are ideal for:

keeping the element within the bounds of the visible area
ensuring <body>, <main>, or a splash header has a minimum height as tall as the viewport (min-height: 100vh)
creating proportionate, responsive elements
combining with calc to affect the visibility of multiple elements
creating full-height, full-width slideshows (particularly combined with scroll-snap)

This example is of a nearly full-height header that makes use of calc to ensure a bit of space is left to hint at additional content:

Space Relative to the Element

Use: em

em will stay proportionate to the element or nearest ancestor's font-size rule. One em is equal to the font-size, so by default, this is equal to 1rem which is by default 16px.

Compared to rem, em can compound from parent to child, causing adverse results. Consider the following example of a list where the font-size is set in em and compounds for the nested lists:

When and how to use `em`

between typography elements
padding on textual components, ex. buttons or input fields
for letter-spacing, typically as a micro value such as 0.03, can also be defined negatively

In the following codepen, you can change the $font-size variable to see how it affects the label and button as a unit:

Spacing Relative to Content

Use: ch, em

While em can be appropriate for spacing based on content, an underdog that doesn't see much action is the ch unit. This unit is equal to the width of the zero character in the set font-family.

When and how to use `ch`

Use to set width based on the optimal line-length (50-80 characters depending on the resource used). Start with 80ch and optimize as needed based on the font in use, keeping it mind most fonts have a narrow 0 so the ch will likely need to be larger than the line-length desired.

This is great for:

article content
setting the flex-basis value, especially for the flexbox albatross technique
setting the "max" part of minmax for grid columns
providing a min-width on buttons or navigation items

Top comments (15)

Eric Ahnell • Feb 17 '20

I had no idea about the ch unit in CSS until I read this post. Thanks, Stephanie!

Stephanie Eckles • Feb 17 '20

Cool, glad to help!

James245332 • Aug 25 '20

Greatest day

Monica Macomber • Feb 17 '20 • Edited

Thanks for the article and the examples! Definitely a topic that could use the coverage.

The ch units took me a minute but I think I understand:

So chs behave similar to ems in the way they can scale with their parent element's font size. The only difference is that the x value you set for chs is approximately equal to the width of x number of characters. That right?

Catherine Azzarello • Feb 18 '20

Can't tell you how many times this unit has been the savior for some content-heavy tight layouts. Assuming everything else is responsibly sized w/breakpoints (ie: your fonts get larger at certain BPs) you can generally simplify with max-width: XXch for content, rather than add multiple px widths at corresponding BPs.

Stephanie Eckles • Feb 17 '20

Almost! It’s a little weird given the name but it’s the width of the 0 (zero) character 👍

Uladzimir Kalinets • Mar 1 '20

Thank you, Stephanie, for a very useful article!

I just wanted to recommend to avoid using min-height: 100vh on mobile devices because of misconception, you can read more about it here

Stephanie Eckles • Mar 1 '20

Thanks for the callout! As with any technique, browser and device testing is recommended :) Looks like this issue has been updated a bit (10 days ago as of this comment) and a proposal for new units to address this issue is in progress: github.com/w3c/csswg-drafts/issues...

I'll be happy to update the article when those new units land, but a useful note for the current issue, thanks again!

Anshul Negi • May 20 '20

Though beautifully explained.
Still I don't grasp the concept completely
Problem I face when using unit is
Font size for desktop view remain unchanged in mobile views( I have used rem as unit for font-size).
Div and Image remain unchanged in all views which creates mess in responsiveness(px as unit for height and width).
For letter-spacing and line-height I have used rem as unit, do I need to change to em?