Padding is a Strange Creature

While redesigning my pages, I came across an odd behaviour when trying to manage a white box and the padding within it. This tells you a lot about browser defaults and how they can be a pain.

Have a look at the following piece of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Margin Padding Test</title>
<style type="text/css">
body {
 background: #e5e5e5;

#content {
 padding: 0;
 background-color: #fff;
h2 {
 margin: 0;
 padding: 0;

<div id="header">
<div id="content">
 <h2>First Heading</h2>
 <h2>Second Heading</h2>

Keep your eye on where it says content { padding: 0; }. This is how the page now looks like in Firefox (3.6):

strange padding before

CSS Details: content { padding: 0; }

And now, let’s change the padding in the content div to 0 0 1px 0. And here’s the result, again in Firefox (3.6):

strange padding after

CSS Details: content { padding: 0 0 1px 0; }

Man, how can you take anything for granted after you see the bottom padding here… 😉 Maybe those browser reset stylesheets are not such a bad idea after all… At least it looks the same in FF and IE.

The person who can come up with the best explanation will get a pat on the back with this machine.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

Du kommentierst mit Deinem Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s