Html CSS 边距：0 未设置为 0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5387576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Margin: 0 is not setting to 0
提问by Nipuna
I'm a new comer to web designing. I created my web page layout using CSS and HTML as below. The problem is even though i set the margin to 0, the upper margin is not setting to 0 and leaves some space. How can i clear this white space?
我是网页设计的新手。我使用 CSS 和 HTML 创建了我的网页布局，如下所示。问题是即使我将边距设置为 0，上边距也没有设置为 0 并留下一些空间。我怎样才能清除这个空白区域？
Screen Shot of the problem
问题的屏幕截图
Style Sheet
样式表
<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
HTML
<body>
<div id="header">
<div id="header_content">
<p>header_content</p>
</div>
</div>
<div id="content">
Main Content
</div>
</body>
Here's the whole file
这是整个文件
<!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>
回答by alex
Try...
尝试...
body {
margin: 0;
padding: 0;
}
Because of browsers using different default stylesheets, some people recommend a resetstylesheet such as Eric Meyer's Reset Reloaded.
由于浏览器使用不同的默认样式表，有些人推荐使用重置样式表，例如Eric Meyer 的 Reset Reloaded。
回答by Dan G
You need to set the actual page to margin:0 and padding: 0 to the actual html, not just the body.
您需要将实际页面设置为 margin:0 并将 padding: 0 设置为实际的 html，而不仅仅是正文。
use this in your css stylesheet.
在您的 css 样式表中使用它。
*, html {
margin:0;
padding:0;
}
that will set the whole page to 0, for a fresh clean start with no margin or paddings.
这会将整个页面设置为 0，以获得没有边距或填充的全新干净开始。
回答by Yannick Loiseau
you should have either (or both):
你应该有一个（或两个）：
- a paddding != 0 on body
- a margin !=0 on #header
- 身体上的填充 != 0
- #header 上的边距 !=0
try
尝试
html, #header {
margin: 0 !important;
padding: 0 !important;
}
The marginis the "space" outsidethe box, the paddingis the "space" insidethe box (between the border and the content).
The !importantprevent overriding of property by latter rules.
该margin是“空间”外面的框，padding是“空间”内框（边框和内容之间）。该!important阻止后者的规则重写的财产。
回答by Hussein
Try
尝试
html, body{
margin:0 !important;
padding:0 !important;
}
回答by alter
h1 {
margin-top:0;
padding-top: 0;}
It' s just a misunderstanding with h1 tag. You have to set h1 tag margin-top and padding-top to 0 (zero).
这只是对 h1 标签的误解。您必须将 h1 标签 margin-top 和 padding-top 设置为 0（零）。
回答by Zectbumo
回答by Zectbumo
After reading this and troubleshooting the same issues, I agree that it is related to headings (h1 for sure, havent played with any others), also browser styles adding margins and paddings with clever rules that are hard to find and over-ride.
阅读本文并解决相同的问题后，我同意它与标题有关（当然是 h1，还没有与其他人一起玩过），以及浏览器样式添加边距和填充的巧妙规则，这些规则很难找到和覆盖。
I have adapted a technique used to apply the box-sizing property properly to margins and paddings. the original article for box-sizing is located at CSS-Tricks:
我采用了一种用于将 box-sizing 属性正确应用于边距和填充的技术。box-sizing 的原始文章位于CSS-Tricks：
html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}
So far it is exactly the trick for not using complex resets and makes applying a design much easier for myself anyways. Hope it helps.
到目前为止，这正是不使用复杂重置的诀窍，并且无论如何使我自己更容易应用设计。希望能帮助到你。
回答by HarshSigma
add this code to the starting of the main CSS.
将此代码添加到主 CSS 的开头。
*,html,body{
margin:0 !important;
padding:0 !important;
box-sizing: border-box !important;;
}
回答by RS at Work
I just started learning CSS today and encountered the same problem and I think You don't need to reset style of all HTML tags. You need to reset default margin of top HTML You used, which is paragraph tag. And I know this is old question, but maybe my solution below will help somebody.
我今天刚开始学习 CSS 遇到了同样的问题，我认为您不需要重置所有 HTML 标签的样式。您需要重置您使用的顶部 HTML 的默认边距，即段落标记。我知道这是个老问题，但也许我下面的解决方案会对某人有所帮助。
Try this:
尝试这个：
body{
margin: 0;
background:#F0F0F0;
}
p{
margin: 0;
}
