DEV Community

Guide to CSS Units for Relative Spacing

Stephanie Eckles on February 15, 2020

Space Relative to the Document :root Use: rem Unless you change it, the default rem value is 16px with the advantage of responding to c...

Read full post

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 👍

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

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?

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!