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...
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

Cool, glad to help!

Collapse
 
james245332 profile image
James245332

Greatest day

Collapse
 
monicat profile image
Monica Macomber • 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?

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

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

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

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!