Spacing
Spacing is the adjustable empty distance between or around textual, typographic, interface, or layout elements.
Design for Developers
Spacing is the amount and arrangement of empty space between visual elements, including divisions within a grid.
- How it is used
- Uses empty space to organize interfaces, establish hierarchy, support scanning, and make content more consumable.
- How deep it goes
- Explains spacing through proximity, focal points, grid gaps, and before-and-after examples, without prescribing measurements or implementation code.
- Examples
- Uses grid columns, section headings, early cramped websites, a personal website, and tightly packed three-column content components.
- What you can do after
- Apply spacing to separate components, emphasize focal points, guide scanning, and maintain balance across changing layouts.
CSS in Depth, Second Edition
Design spacing is the arrangement of empty space between and around interface elements.
- How it is used
- Establishes visual patterns, hierarchy, and readability through space between interface elements, components, and text.
- How deep it goes
- Explains measured layouts, margins, relative units, line-height, letter-spacing, and flexbox gap without detailing CSS implementations.
- Examples
- Uses annotated mockup measurements, navigation buttons, hero content, columns, and text samples with varied spacing.
- What you can do after
- Apply spacing via CSS margins, relative units, line-height, letter-spacing, and flexbox gap while preserving visual patterns.
Related concepts
- letter-spacingconfigured by · Letter spacing, or tracking, is the typographic adjustment of horizontal space between adjacent characters or glyphs across text.
- line-height propertyconfigured by · The CSS line-height property specifies the height of each line box and thereby controls the vertical spacing of text lines.
- vertical rhythmconfigured by · Vertical rhythm is a typographic layout system that uses regular vertical spacing to establish consistent relationships among page elements.
- margin propertyused by · The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
- contrastused by · Contrast is the perceptual or measurable difference in visual properties, such as luminance or color, that makes elements distinguishable.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.