Protip: XHTML to HTML5 Inexplicable Vertical Space

If you’ve changed the DOCTYPE of an older site using XHTML to HTML5 and now your images have an inexplicable space beneath them, it’s not just you.

Solution

img { display: block; }

I lost probably 6 hours trying to troubleshoot the CSS and no amount of border, padding, margin or positioning helped. My google-fu was weak early on, but I eventually stumbled on this stackoverflow post (see Alohci‘s comment for the “why”) which worked like magic.

Hope this saves you some needless grinding.