Padding

HTML & CSS
1

I hope you guys can help…

Why is it that when you apply padding to all four sides like this:

padding: 0px;

The padding top value seems to be greater than the padding left value when it is viewed in the browser?

I hope that makes sense

2

It isn’t the padding then, unless a style is not overridden by a previous one (specifity) or if it’s a line-height or margin applied to that element.

3

It’s probably just a mind trick :). I see them all equally though. But if you do notice an actual distance then something else is probably at play.

4 
<!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>
		<title>Footbag Freaks</title>
		<meta http-equiv="Content-Type"
				content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<img src="img/logo.gif" alt="Footbag Freaks" height="77" width="203" />
				<div id="header-bottom">
					<p id="tagline">The home of the Hack</p>
					<ul>
						<li><a href="">Contact Us</a></li>
						<li><a href="">About Us</a></li>
						<li><a href="">Privacy Policy</a></li>
						<li><a href="">Sitemap</a></li>
					</ul>
				</div><!-- header-bottom -->	
			</div><!-- header -->
			<div id="content">
				<h2>Simon Says</h2>
				<p>Simon Mackie tells us how a change of boots has given him new moves and a new outlook
						as the new season approaches.</p>
				<p><a href="">Read More</a></p>
				<h2>Recent Features</h2>
				<ul>
					<li>
						<h3>Head for the Hills: Is Altitude Training the Answer?</h3>
						<p>Lachlan 'Super Toe' Donald</p>
						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
								Curae; Present hendrerit iaculis arcu.</p>
						<p><a href="">Full Story</a></p>	
					</li>
					<li>
						<h3>Hack up the Place: Freestylin' Super Tips</h3>
						<p>Jules 'Pony King' Szemere</p>
						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
								Curae; Present hendrerit iaculis arcu.</p>
						<p><a href="">Full Story</a></p>		
					</li>
					<li>
						<h3>The Complete Black Hat Hacker's Survival Guide</h3>
						<p>Mark 'Steel Tip' Harbottle</p>
						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
								Curae; Present hendrerit iaculis arcu.</p>
						<p><a href="">Full Story</a></p>		
					</li>
					<li>
						<h3>The Complete Black Hat Hacker's Survival Guide</h3>
						<p>Mark 'Steel Tip' Harbottle</p>
						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
								Curae; Present hendrerit iaculis arcu.</p>
						<p><a href="">Full Story</a></p>		
					</li>
					<li>
						<h3>Five Tricks You Didn't Even Know You Knew</h3>
						<p>Simon 'Mack Daddy' Mackie</p>
						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
								Curae; Present hendrerit iaculis arcu.</p>
						<p><a href="">Full Story</a></p>		
					</li>
				</ul>
			</div><!-- content -->
			<div id="sidebar">
				<h3>Site Search</h3>
				<form method="post" action="" id="searchform">
					<div>
						<label for="keywords">Keywords</label>:
						<input type="text" name="keywords" id="keywords" />
					</div>
					<div>
						<input type="submit" name="btnSearch" id="btnSearch" />
					</div>
				</form>
				<h3>Coming Events</h3>
				<ul>
					<li>10 Apr 06 -<br /><a href="">Seattle Zone Qualifier</a></li>
					<li>13 Apr 06 -<br /><a href="">Footbag00M 05 - NY</a></li>
					<li>21 Apr 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>
					<li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>
				</ul>
				<h3>Move of the Month</h3>
				<h4>The Outer Stall</h4>
				<p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed vestibulum leo.</p>
				<p><a href="">more</a></p>
			</div><!-- sidebar -->
		</div><!-- wrapper -->
	</body>
</html>

/*
CSS for Footbag Freaks
*/

body {
	margin: 0;
	padding: 0;
	background-color: #050845;
	color: white;
	background-image: url(img/bg.jpg);
	background-repeat: repeat-x;
	font: small Arial, Helvetica, Verdana, sans-serif;
	}
	
#wrapper {
	background-color: #fdf8f2;
	color: black;
	margin: 30px 40px 30px 40px;
	padding: 10px;
	}
	
#header-bottom {
	border-top: 1px solid #b9d2e3;
	border-bottom: 1px solid #b9d2e3;
	}

#header-bottom ul {
	margin: 0;
	padding: 0;
	}

#header-bottom li {
	display: inline;
	}
	
#header-bottom a:link, #header-bottom a:visited {
	text-decoration: none;
	background-color: #fdf8f2;
	color: #050845;
	}
	
#tagline {
	font-weight: bold;
	background-color: #fdf8f2;
	color: #050845;
	font-style: italic;
	}

This is the markup, see if you can see what I mean.

5

Which element are we meant to be looking at?

6

the “content” inside the “wrapper”

7

Hi, make sure you have margins reset for elements.
I notice many elements in there that have margins set by default.


h2,p{margin:0;}