DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Discussion on: Guide to CSS Units for Relative Spacing

Collapse
mon_ste_cat profile image
Monica Stevens • Edited on

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