Blog
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>Hello!</h1>
<p>Blabla</p>
</div>
<div id="content">
<h2>First Heading</h2>
<p>blabla</p>
<h2>Second Heading</h2>
<p>blablabla</p>
</div>
</body>
</html>
Keep your eye on where it says content { padding: 0; }. This is how the page now looks like in Firefox (3.6):
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):
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.
