An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Slashdot
- Web Designer Wall
- The Logo Smith
- Spoon Graphics
- Smashing Magazine
- Web Design Ledger
- Line 25
- Stylized Web
- Design Modo
- Android Headlines
Help Webnuz
Referal links:
Guide to CSS Units for Relative Spacing
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 viewportvw: viewport width - based on the width of the viewportvmin: viewport minimum - returns the smaller value ofvhorvw, updating responsivelyvmax: viewport maximum - returns the larger value ofvhorvw, 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
calcto 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
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:
articlecontent- setting the
flex-basisvalue, especially for the flexbox albatross technique - setting the "max" part of
minmaxfor grid columns - providing a
min-widthon buttons or navigation items
Original Link: https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To