homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

5+ Year Member



 
Msg#: 3580747 posted 3:55 am on Feb 21, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3580747 posted 4:03 am on Feb 21, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved