(1) whitespace im Quelltext verändert Rendering; (2) box höher als img.

[djr]

Das genügt aber nur dort, wo vertical-align überhaupt funktioniert (z.B. Tabellenzellen).

Die MDN web docs beschrieben es am besten:

The vertical-align property can be used in two contexts:

• To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an <img> in a line of text
• To vertically align the content of a cell in a table

Note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.

Ersteres ist bei <img> standardmäßig gegeben. Und wenn das Bild z.B. ein Grid-Child ist, dann braucht es weder ein vertical-align, noch eine extra display-Beschreibung (außer um Browser-Bugs zu fixen).

In Summe ist ein img {vertical-align:bottom;} der bestmögliche CSS-Reboot, wenn man die Unterlänge nicht sehen will.