Margines pod obrazkiem w HTML5

Jeśli wstawimy obrazek w element blokowy w HTML5 i nadamy obrazkowi zdefiniowany rozmiar, element nadrzędny będzie o 3px wyższy i będzie posiadał dziwny margines na dole. Okazuje się, że HTML5 traktuje obrazek jak tekst i zostawia na dole zapas dla liter z ogonkiem na dole jak „y” czy „g”. Wystarczy dodać właściwość „vertical-align: middle” i wszystko będzie OK :)

vs.