Friday, January 26, 2007

HTML: Browser Bug?

If you put an h1 inside a div, the spacing above the h1 caused by the h1 will go outside the div. However, subtle variations will make the spacing go inside the div. I'm confused. I would call this a browser bug, but it seems to be somewhat consistent among browsers. Here's a simple test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>H1 Whitespace Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">
#header {
background-color: yellow;
height: 20px;
}

#body {
background-color: yellow;

/* If you uncomment this, it behaves as I would expect.
border: 1px solid black;
*/
}
</style>
</head>
<body>
<div id="header"></div>
<div id="body">
<!--If you use text instead of an h1 here, it behaves as I would expect.-->
<h1>Hello</h1>

<p>This is some other content.</p>
</div>
</body>
</html>
Note that both the HTML and CSS pass validation tests.

Here's what it looks like as is:


Here's what it looks like with a border around the div. Notice it loses the white space:


Here's what it looks like if you don't use an h1. Again, it loses the white space:


What's up with that? Is this a browser bug? Is it a spec bug? Is there something ugly that I don't know about h1s and the box model?

7 comments:

Anonymous said...

Block-level elements like h1 have a default margin, unless you've overwritten it. According to the spec, the margin of an element without padding or borders is allowed to stick out of the element's container, into the margin of the container's predecessor - this helps with text flow, so that you don't get double margins between paragraphs of continuous text.

Shannon -jj Behrens said...

Thank you!!!

Christopher Lenz said...

See also the Eric Meyer's article "Uncollapsing Margins" for more details on this topic

mde said...
This comment has been removed by the author.
mde said...

Confusing behavior like this is one reason people use something like YUI Reset CSS (Added the link, there we go :)) to set their own explicit base values instead of relying on vendor defaults. When you throw an element on a page, you have a somewhat better idea of how it's going to behave.

Shannon -jj Behrens said...

> Confusing behavior like this is one reason people use something like YUI Reset CSS

Ah, yes, I've tried it out. Unfortunately, I'm *less* confused by the default browser behavior because I'm familiar with it than I am confused by YUI Reset because it's so draconian. I'm not against it, or anything, it's just more than I could handle.

Shannon -jj Behrens said...

> See also the Eric Meyer's article "Uncollapsing Margins"

Great tip! Thanks!