css边距和填充新手问题
我正在努力适应以下 html 和 css 代码的行为。我知道框布局和边距折叠，但它似乎没有解释以下内容：
1）使用下面的代码，未经修改，徽标显示与页面顶部之间有大约 10px 的空白，大约低于 4 或 5 个像素，但颜色由 #allcontent.background-color 指定。有趣的是，如果我将正文中的 font-size 属性设置为 0px，则会删除徽标上方的所有空白以及其下方的 4 或 5 个像素。
2) 如果#allcontent 中的内边距值从0px 更改为1px，则实际上会在徽标的上方和下方添加大约10px 的内边距，其颜色由#allcontent.background-color 指定。
index.html 文件：
<!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 文件：
body {
margin: 0px;
padding: 0px;
}
#allcontent{
background-color: #dddddd;
padding: 0px;
margin: 0px;
}
#header {
padding: 0px;
margin: 0px;
}
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是您的代码： http://jsbin.com/eronaq
从更简单的问题开始：
该间隙是为
g和p等字母的文本中的下行部分保留的空间。您可以通过几种方式解决这个问题。例如，通过将
img 上的。display: block或vertical-align设置为top或bottom显示：块：http://jsbin.com/eronaq/2参见： http://reference.sitepoint.com/css/collapsingmargins< /a>
这个空间是
p上的margin-top一直折叠到body，因为没有什么可以阻止它按照规则所定义的方式进行崩溃的边缘。This is your code: http://jsbin.com/eronaq
Starting with the easier issue:
That gap is the space reserved for the descenders in text for letters like
gandp.You can fix that in a few ways. For example, by setting
display: blockorvertical-aligntotoporbottomon theimg.display: block: http://jsbin.com/eronaq/2See: http://reference.sitepoint.com/css/collapsingmargins
That space is the
margin-topon thepcollapsing through all the way up tobody, because there is nothing to stop it doing as defined by the rules of collapsing margins.