CODEWITHSUNDEEP
csshtml
Jarrod Ballou
Jarrod Ballou

Reputation: 139

HTML5 Doctype screws up DIV heights?

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?

Upvotes: 5

Views: 1847

Answers (2)

thirtydot
thirtydot

Reputation: 228162

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:

Upvotes: 10

Johan
Johan

Reputation: 19

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.

Upvotes: 1

Related Questions