A relative unit is a CSS length unit whose computed size depends on another value. Use it when an element should scale with text rather than remain a fixed pixel size. section 10.3.1
Relative units help related text stay uniformly sized and spaced. A quote styled with an em-based font size grows when the surrounding content’s font size changes. section 7.2
Choose a relative unit when:
- Padding and margins should expand or shrink with the text size, preventing a design from becoming cramped or overly spacious. section 10.3.1
- Typography and spacing should remain coordinated as content changes size. section 7.2
- A measurement should remain fixed instead, use a fixed unit such as pixels; the example keeps a one-pixel border unchanged. section 10.3.1
Scaling a blockquote
A blockquote uses font-size: 2em and line-height: 1. Because the font already has a naturally tall line height, the tighter value is a deliberate exception to the usual legibility guidance. section 7.2
Listing 7.5 <blockquote> formatting
blockquote {
font-family: 'Passions Conflict', cursive;
font-size: 2em;
line-height: 1;
}
Inspect the complete blockquote rule using an em-based font size and a unitless line height. section 7.2
Listing 10.4 Styling input fields that aren’t of type radio or checkbox
input:not([type="radio"], [type="checkbox"]) {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none; #1
border-bottom: solid 1px var(--primary); #2
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1; #3
padding: 0 0 .25rem;
width: 100%;
}
Inspect a form-control rule that combines rem-based text and padding with a fixed one-pixel border. section 10.3.1
