Padding creates internal space between content and an element’s edge. Use it as part of a consistent vertical rhythm so text and interface components feel orderly rather than arbitrarily spaced. section 10.5
Build padding decisions around a repeatable spacing system:
- Choose a baseline, such as 12px, and use compatible multiples for padding, margins, and line-height adjustments. section 10.5
- Check padding alongside font size and line height so surrounding text aligns with the baseline grid. section 10.5
- Adjust spacing by eye when readability or hierarchy requires it; there is no universal perfect value. section 10.5
Aligning body copy
With 16px body text and a 1.25 line-height, the line height is 20px. Adding 16px of top spacing produces 36px, a multiple of the 12px baseline, helping the paragraph fit the vertical rhythm. section 10.5
