Vertical rhythm
Keeping every vertical gap a multiple of one base unit, usually the body line-height, so text marches evenly down the page.
See it
What it is
Vertical rhythm means every vertical measurement on the page is a multiple of one base unit, usually the body line-height. Pick 24px as the unit and then paragraph margins, heading line-heights, list gaps and section padding all land on 24, 48, 72. The effect is that text sits on an invisible ruled page, the way it does in a well-set book, and side-by-side columns stay in step.
It pays off most in long-form reading: docs, editorial, changelogs, anything with many stacked blocks. The practical web version is looser than the print original: a spacing scale in 4px or 8px steps plus disciplined line-heights gets you 90 percent of the calm, without fighting to snap every glyph to a true baseline grid.
Gotcha: one arbitrary-height element wrecks the whole column. Images, embeds, inputs and icons rarely measure a clean multiple, so give them explicit aspect ratios or wrappers that round up. The other trap is half-leading: CSS splits extra line-height above and below the text, so your visual gap never equals your margin value until you trim the box with 'text-box' (leading trim).
Ask AI for it
Set up a vertical rhythm system in CSS: base font-size 1rem with line-height 1.5 (a 24px unit), exposed as '--rhythm: 1.5rem'. Express every vertical margin, padding and heading line-height as a multiple of '--rhythm' using calc(), use margin-bottom only (no collapsing surprises), and give images and embeds wrapper classes that round their height up to the nearest unit. Add a toggleable debug overlay of repeating-linear-gradient lines every 24px so I can see the grid.