loading...

Guide to CSS Units for Relative Spacing

5t3ph profile image Stephanie Eckles ・Updated on ・2 min read

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

Discussion

pic
Editor guide
Collapse
wrldwzrd89 profile image
Eric Ahnell

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

Collapse
5t3ph profile image
Stephanie Eckles Author

Cool, glad to help!

Collapse
james245332 profile image
James245332

Greatest day

Collapse
moca_salter profile image
Monica Salter

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?

Collapse
azzcatdesign profile image
Catherine Azzarello

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.

Collapse
5t3ph profile image
Stephanie Eckles Author

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

Collapse
kalinets profile image
Uladzimir Kalinets

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

Collapse
5t3ph profile image
Stephanie Eckles Author

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!

Collapse
anshulnegitc profile image
Anshul Negi

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?

Collapse
george profile image
George Nance

Great article! Thanks Stephanie :)

Collapse
mail2bishnoi profile image
Ashutosh Bishnoi

Great Article

Collapse
prahladmishra profile image
Prahlad Mishra

Great to see units at one time. Very good for reference.

Collapse
5t3ph profile image
Stephanie Eckles Author

Happy to hear it will help you!

Collapse
pfacklam profile image
Paul Facklam

This is a very good und useful listing for CSS Units and their use cases. Thank you for that!

Collapse
cmilr profile image
Cary Miller

Great write-up.. thank you!