CSS页边距:0未设置为0
CSS页边距:0未设置为0
提问于 2011-03-22 14:21:36
我是一个网页设计的新手。我使用CSS和HTML创建了我的网页布局，如下所示。问题是，即使我将边距设置为0，上边距也没有设置为0，并留下了一些空格。如何才能清除这个空白区域？
problem的屏幕截图
样式表
<style type="text/css">
body{
margin:0 auto;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
</style>HTML
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>这里是整个文件
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
margin: 0 !important;
padding: 0 !important;
}
body{
margin:0; padding: 0;
background:#F0F0F0;}
#header{
background-color:#009ACD;
height:120px;}
#header_content {
width:70%;
background-color:#00B2EE;
height:120px;
margin:0 auto;
text-align:center;}
#content{
width:68%;
background-color:#EBEBEB;
margin:0 auto;
padding:20px;}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
</html>回答 12
Stack Overflow用户
回答已采纳
发布于 2011-03-22 14:24:25
Stack Overflow用户
发布于 2011-05-28 12:18:54
您需要将实际页面设置为margin:0，并将Padding0设置为实际的html，而不仅仅是正文。
在css样式表中使用它。
*, html {
margin:0;
padding:0;
}这会将整个页面设置为0，以便重新开始，没有页边距或填充。
Stack Overflow用户
发布于 2011-03-22 14:47:23
您应该具有以下两项中的一项(或两者)：
- a paddding !=0 on body
- a margin != 0 on #header
试一试
html, #header {
margin: 0 !important;
padding: 0 !important;
}margin是框外的“空间”，padding是框内的“空间”(边框和内容之间)。!important防止后面规则重写属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5387576
复制相关文章
相似问题