Margin is empty space that separates an element from nearby content or a containing boundary. In typography, it helps keep text aligned to a consistent vertical rhythm instead of treating spacing as an arbitrary visual choice. section 10.5 section 6.2.2
Use margin to make spacing decisions consistent and readable:
- Choose a baseline unit, such as 12px, then calculate margins and padding from that rhythm. section 10.5
- Adjust margin when line-height changes so the combined dimensions still align with the baseline grid. section 10.5
- Define the margin between grid columns alongside the container width and number of columns. section 6.2.2
Aligning body copy
With a 16px body font and a 1.25 line-height, each line is 20px high. Adding 16px of top margin makes the combined 36px align with the chosen rhythm, while also separating paragraphs from surrounding content. section 10.5
