Protip: XHTML to HTML5 Inexplicable Vertical Space

HTML5 LogoIf 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.