A CSS pixel (px) is a CSS length unit used for dimensions and viewport thresholds. It carries design measurements directly into CSS, while em and rem can make measurements respond to font sizing. section 7.2 section 12.1.1
Choose between pixels and relative units according to how the spacing should behave:
- Use px for larger gaps or spacing between boxes when resizing with text is not needed. section 12.1.1
- Consider em or rem for small measurements around text and buttons when they should respond to the user’s font-size setting. section 12.1.1
- Use px or em for media-query breakpoints; em is based on the browser’s default font size, which can vary with user settings. section 7.2
Convert a design measurement
For a 10 px navbar gap with a 16 px base font size, use 0.625em. Larger layout gaps can remain in px, such as a 40 px margin below a hero image or a 25 px gap between columns. section 12.1.1 section 12.1.1
Listing 7.7 Adding a breakpoint to the page title styles
.title > h1 {
color: #333;
text-transform: uppercase;
font-size: 1.5rem;
margin-block: 0.2em;
}
@media (min-width: 560px) { #1
.title > h1 {
font-size: 2.25rem; #2
}
}
A 560px viewport breakpoint increases the title’s font size on wider screens. section 7.2
