CSS Margin: 0 未设置为 0答案

【问题标题】：CSS Margin: 0 is not setting to 0CSS Margin: 0 未设置为 0
【发布时间】：2011-07-20 05:50:45
【问题描述】：

我是网页设计的新手。我使用 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>

【问题讨论】：

我希望这个链接（stackoverflow.com/a/18772399/2991952）能有效地帮助你。
实际上是margins折叠，当两个margin碰撞时，margin会取决于较大的margin。可以参考本站MDN - Mastering margin collapsing

标签： html css margin

【解决方案1】：

试试……

body {
   margin: 0;
   padding: 0;
}

jsFiddle.

由于浏览器使用不同的默认样式表，有些人建议使用 reset 样式表，例如Eric Meyer's Reset Reloaded。

【讨论】：

不，它不起作用。但是当我插入没有任何标签的东西时，在“header”和“header_content”标签之间它的工作
@Nipuna 它对我有用。试试我链接的 CSS 重置，可能会有更多的边距和/或填充。

【解决方案2】：

您需要将实际页面设置为 margin:0 和 padding:0 设置为实际的 html，而不仅仅是正文。

在你的 CSS 样式表中使用它。

*, html {
    margin:0;
    padding:0;  
}

这会将整个页面设置为 0，以获得没有边距或填充的全新干净开始。

【讨论】：

* 到底是做什么的？
"这会将整个页面设置为 0"。你是对的，它会将整个页面设置为 0。使用 * 页面上的每个元素都将有一个不需要的边距和填充 0。
为我工作。谢谢。
为什么是* 和 html？ * 不匹配 html 元素吗？
@alex 会的。

【解决方案3】：

你应该有一个（或两个）：

主体上的填充！= 0
#header 上的边距 !=0

试试

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}

margin 是框的“空格”，padding 是框的“空格”内（边框和内容之间） . !important 防止后面的规则覆盖属性。

【讨论】：

我发布了整个html文档。它适合你吗？
不，不工作......而且不明白为什么。这令人沮丧！所有开发工具都显示 0 的边距/填充。
你应该谨慎使用!important 非常，如果有的话。

【解决方案4】：

h1 {
margin-top:0;
padding-top: 0;}

这只是对 h1 标签的误解。您必须将 h1 标签 margin-top 和 padding-top 设置为 0（零）。

【讨论】：

【解决方案5】：

试试

html, body{
  margin:0 !important;
  padding:0 !important;
}

【讨论】：

不，它也没有用。但是重置表起作用了。我想知道问题是什么
在下面查看我的回复......我写的时间太长了，你已经接受了；）
@nipuna 你的 html 中有表格吗？我想知道重置文件中的内容可以解决您的问题。除了上面提供的内容之外，您还有其他 HTML 加载吗？
@Yannick：很抱歉，重置表对我有用。这就是我接受它的原因。但你的也没有为我工作。可能问题出在浏览器上
@nipuna: no pb...无论如何，重置样式表是一个好习惯。好奇它到底解决了什么...

【解决方案6】：

似乎没有人真正阅读您的问题并查看您的源代码。这是大家一直在等待的答案：

#header_content p {
    margin-top: 0;
}

jsFiddle

【讨论】：

您也可以通过将
更改为

或 jsfiddle.net/80oc6vzy/1 来修复它

【解决方案7】：

只需在主 CSS 的开头使用此代码即可。

       * {
           margin: 0;
           padding: 0;
         }

以上代码几乎适用于所有浏览器。

【讨论】：

【解决方案8】：

在阅读本文并解决相同的问题后，我同意它与标题有关（肯定是 h1，没有与任何其他人一起玩过），还有浏览器样式添加边距和填充，具有难以找到和过度的巧妙规则骑。

我已经采用了一种技术，用于将 box-sizing 属性正确应用于边距和填充。 box-sizing 原文位于CSS-Tricks：

html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}

到目前为止，这正是不使用复杂重置的诀窍，而且无论如何我都更容易应用设计。希望对您有所帮助。

【讨论】：

【解决方案9】：

我今天刚开始学习CSS，遇到了同样的问题，我认为你不需要重置所有HTML标签的样式。您需要重置您使用的顶部 HTML 的默认边距，即段落标签。我知道这是个老问题，但也许我下面的解决方案会对某人有所帮助。

试试这个：

body{   
    margin: 0; 
    background:#F0F0F0;
}
p{
    margin: 0;
}

【讨论】：

【解决方案10】：

这很简单。只需将其添加到正文中-

body{
margin:0;
padding:0;
overflow:hidden;
}

【讨论】：

【解决方案11】：

将此代码添加到主 CSS 的开头。

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}

【讨论】：

在 html 元素上设置零边距会干扰 iPad 上的滚动，使其非常生涩和粘滞。你不能向上滑动并让它继续滚动，所以要小心这个。可以在 body 上设置零边距

【解决方案12】：

试试

body {
    margin: 0;
    padding: 0;
}

而不是

.body {
    margin: 0;
    padding: 0;
}

不要使用类选择器选择正文。

【讨论】：

此答案似乎重复了多个其他答案（包括已接受的答案）已经建议的内容。新的答案，尤其是旧问题的答案，应该提出新的解决方案，而不是重复或重复旧的解决方案。