Skip to main content

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?

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.
jjinux said…
Thank you!!!
Anonymous said…
See also the Eric Meyer's article "Uncollapsing Margins" for more details on this topic
Unknown said…
This comment has been removed by the author.
Unknown 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.
jjinux 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.
jjinux said…
> See also the Eric Meyer's article "Uncollapsing Margins"

Great tip! Thanks!

Popular posts from this blog

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python. Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening.

The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for Bukkit s…

Apple: iPad and Emacs

Someone asked my boss's buddy Art Medlar if he was going to buy an iPad. He said, "I figure as soon as it runs Emacs, that will be the sign to buy." I think he was just trying to be funny, but his statement is actually fairly profound.

It's well known that submitting iPhone and iPad applications for sale on Apple's store is a huge pain--even if they're free and open source. Apple is acting as a gatekeeper for what is and isn't allowed on your device. I heard that Apple would never allow a scripting language to be installed on your iPad because it would allow end users to run code that they hadn't verified. (I don't have a reference for this, but if you do, please post it below.) Emacs is mostly written in Emacs Lisp. Per Apple's policy, I don't think it'll ever be possible to run Emacs on the iPad.

Emacs was written by Richard Stallman, and it practically defines the Free Software movement (in a manner of speaking at least). Stal…

ERNOS: Erlang Networked Operating System

I've been reading Dreaming in Code lately, and I really like it. If you're not a dreamer, you may safely skip the rest of this post ;)

In Chapter 10, "Engineers and Artists", Alan Kay, John Backus, and Jaron Lanier really got me thinking. I've also been thinking a lot about Minix 3, Erlang, and the original Lisp machine. The ideas are beginning to synthesize into something cohesive--more than just the sum of their parts.

Now, I'm sure that many of these ideas have already been envisioned within Tunes.org, LLVM, Microsoft's Singularity project, or in some other place that I haven't managed to discover or fully read, but I'm going to blog them anyway.

Rather than wax philosophical, let me just dump out some ideas:Start with Minix 3. It's a new microkernel, and it's meant for real use, unlike the original Minix. "This new OS is extremely small, with the part that runs in kernel mode under 4000 lines of executable code." I bet it&…