CSS Margin:0未设置为0
我是网页设计的新人.我使用CSS和HTML创建了我的网页布局,如下所示.问题是即使我将边距设置为0,上边距也没有设置为0并留下一些空间.我怎样才能清除这个空白区域？
屏幕截图的问题
样式表
<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>
ale*_*lex 35
尝试...
body {
margin: 0;
padding: 0;
}
由于浏览器使用不同的默认样式表,有些人建议使用重置样式表,例如Eric Meyer的Reset Reloaded.
- @Nipuna它对我有用.尝试我链接到的CSS重置,可能会有更多的边距和/或填充. (2认同)
小智 21
你需要将实际页面设置为margin:0和padding:0到实际的html,而不仅仅是正文.
在你的css样式表中使用它.
*, html {
margin:0;
padding:0;
}
这会将整个页面设置为0,以便在没有边距或填充的情况下进行全新清理.
- “这会将整个页面设置为 0”。你是对的，它会将整个页面设置为 0。使用 `*` 页面上的每个元素都会有一个不需要的边距和填充 0。 (3认同)
- 为什么`*` __and__ `html`？`*` 不会匹配 `html` 元素吗？ (2认同)
你应该有一个（或两个）：
- 身体上的填充 != 0
- #header 上的边距 !=0
尝试
html, #header {
margin: 0 !important;
padding: 0 !important;
}
该margin是“空间”外面的框，padding是“空间”内框（边框和内容之间）。该!important阻止后者的规则重写的财产。
| 归档时间： |
|
| 查看次数： |
96049 次 |
| 最近记录： |