Every line on the same rule
Vertical rhythm is the agreement that every line of type on the page sits on one of a fixed set of invisible rules. Two columns side by side then read as one spread rather than as two lists that happen to be adjacent.
A picture cropped to the rhythm
Eight baselines, whatever the photograph's own proportions are. The crop is the cost, and it is the cheaper of the two prices: the other is every line below the picture sitting between the rules instead of on them.
Multiples, not judgement
Line heights, margins, the space above a heading and below it: all of them whole numbers of one unit. The moment a value is chosen by eye the rhythm is gone, and it is gone for everything after it.
A heading takes two baselines above and one below, because a heading belongs to what follows it rather than to what it interrupts.
The first line, not the box
A heading with a tall line-height has space above the letters that pushes the text off the rule while the box itself measures perfectly. It is the hardest of these to see without the overlay on, which is why there is an overlay.
Turn the rules on and look along a column. Every line should touch one.
Two plates, still in step
Six baselines.
Six baselines, so the captions line up.
The escape hatch
That picture keeps its own proportions, which means its height is not a whole number of baselines. The gap underneath it is measured in the browser and rounded up, because the error does not exist until the image has been laid out at a width nobody chose. This paragraph is back on the rule.