Rectangle 27 1

It's not the XHTML doctype as such that changes it, it's more like strict vs transitional.

Using a XHTML 1.0 transitional doctype puts the browser into limited-quirks mode, whereas the HTML5 style doctype selects standards mode. The vertical-align of images is different between the two modes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

There are a number of ways to remove the black line. One is to set the img to display:block. Another is to set the img to vertical-align:bottom.

If only vertical-align is differen, it doesn't explain why the div gets 4px higher than the image. Normally the image should fit exactly, as the div is positioned absolute without any width/height specified. It seems in html5 the browser silently adds some sort of padding at the bottom?

xhtml - strange html5 behavior - Stack Overflow

xhtml html5