Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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

3:55 am on Feb 21, 2008 (gmt 0)

5+ Year Member

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"
<html xmlns="http://www.w3.org/1999/xhtml">
<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;

<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>
<p id="today">
July 16, 2006

4:03 am on Feb 21, 2008 (gmt 0)

5+ Year Member

Duhh, never mind. The instructor explains it in the next lesson. Sorry!