Menu
When rendering a page in Chrome, Safari, or Firefox on Mac, if I use the HTML5 doctype
<!DOCTYPE html>
and put an image inside a div, the div is rendered consistently 4 pixels too tall. If I use the older doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The divs are rendered correctly, which is the same height as the image inside it. This is using the exact same HTML and CSS code. The only thing that changes is the doctype and an extra 4 pixels show up. Is there any way to fix this?
698
http://hsivonen.iki.fi/doctype/
<!DOCTYPE html> = Standards Mode - http://jsbin.com/ogacor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> = Almost Standards Mode - http://jsbin.com/ogacor/2
To fix it, add display: block or vertical-align: top (or bottom) to the img.
The reason this happens in the first place is that imgs are by default inline elements, and have a default vertical-align of baseline. The baseline does not touch the bottom of the containing element - the gap is the distance between the two.
See:
120
HTML5 specifies that the whitespace within elements should be rendered. Therefor you get the 4px extra, if you set font-size to those elements to 0 for example, the space will dissapear.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
