css margin and padding newbie question
I'm struggling to under the behaviour of the following html and css code. I'm aware of box layouts and margin collapsing but it doesn't seem to explain the following:
开发者_如何转开发1) Using the code below, unmodified, the logo is shown with about 10px of white space between it and the top of the page and about 4 or 5 pixels below but of the color given by #allcontent.background-color. Interestingly if I set the font-size property within the body to 0px this removes all the white space above the logo and the 4 or 5 pixels below it.
2) If the padding value within #allcontent is changed from 0px to 1px then about 10px of padding is actually added above and below the logo with the color specified by the #allcontent.background-color.
index.html file:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div id="allcontent">
<div id="header">
<p>
<img width="200" height="60" src="images/logo.gif" alt="Logo" />
</p>
</div>
</div>
</body>
</html>
my.css file:
body {
margin: 0px;
padding: 0px;
}
#allcontent{
background-color: #dddddd;
padding: 0px;
margin: 0px;
}
#header {
padding: 0px;
margin: 0px;
}
This is your code: http://jsbin.com/eronaq
Starting with the easier issue:
the logo is shown with [..] about 4 or 5 pixels below
That gap is the space reserved for the descenders in text for letters like g and p.
You can fix that in a few ways. For example, by setting display: block or vertical-align to top or bottom on the img.
display: block: http://jsbin.com/eronaq/2
the logo is shown with about 10px of white space between it and the top of the page
See: http://reference.sitepoint.com/css/collapsingmargins
That space is the margin-top on the p collapsing through all the way up to body, because there is nothing to stop it doing as defined by the rules of collapsing margins.
By “touch,” we mean the places at which no padding, borders, or content exist between the adjacent margins.
加载中,请稍侯......
精彩评论