Newbie: 1px pad grows my div by > 1px; why?

Ok, I'm a complete newbie, and I'm going through a CSS tutorial on Lynda.com. I was playing with padding-top on a div tag and I got a result that I didn't understand: I set the padding-top to 1px, but the top of the div grew by a lot more than 1px. I thought that perhaps padding-top on the div means add padding to every descendant of the div, but I've been unable to prove that to myself. Is anyone willing to look at this small html file and tell me why I'm getting so much more than just one pixel? See the comment in the #masthead rule.

Thanks to anyone who can advise.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> About Tea: History </title>
<style type="text/css">
body {
background: #E3EDC2; color: #333;
font: small "Lucida Grande", Arial, sans-serif;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

a img {
border: 0;
}

#masthead {
background: #ABD240;
margin-bottom: 1.75em;

/* uncomment this line and you'll see that the masthead div grows by quite a bit
more than one pixel.
*/
/*padding-top: 1px;*/
}
#navlinks {
margin: 0;
padding: 0.5em 3em 0.5em 3em;
background: #686397; color: #FFF;
}
#navlinks li {
margin-right: 0.5em;
border-right: 1px solid #9999CC;
padding-right: 0.75em;
display: inline;
font-weight: bold;
}
#navlinks li.last {
border-right: none;
}
#homelink {
/* Note that margins don't extend the background area; only padding does */
margin: 1em 2em;
padding: 2em 0 0.5em 1em;
display: block;
background: url(../images/whocares.gif) 100% 100% no-repeat;
}
#today {
margin-top: -1.66em;
padding: 0 2em 0 0;
color: #FFF;
font-weight: bold;
text-align: right;
line-height: 1;
}
#navlinks a {
color: #D4EC84;
}
</style>
</head>
<body>

<div id="masthead">
<a href="#" id="homelink"><img src="images/whocares.gif" alt="JavaCo Tea home" /></a>
<ol id="navlinks">
<li class="first"><a href="aboutus-ourgoal.html">about us</a></li>
<li>about tea</li>
<li><a href="#.html">brewing</a></li>
<li><a href="drinking-instructions.html">drinking</a></li>
<li><a href="#">products</a></li>
<li class="last"><a href="#">contact us</a></li>
</ol>
<p id="today">
July 16, 2006
</p>
</div>
</body>
</html>

GreatBigBore

GreatBigBore

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week