CSS Margin: 0 未设置为 0
Posted
技术标签:
【中文标题】CSS Margin: 0 未设置为 0【英文标题】：CSS Margin: 0 is not setting to 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>
【问题讨论】：
我希望这个链接（***.com/a/18772399/2991952）能有效地帮助你。 实际上是margins折叠，当两个margin碰撞时，margin会取决于较大的margin。可以参考本站MDN - Mastering margin collapsing 【参考方案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;
不要使用类选择器选择正文。
【讨论】：
此答案似乎重复了多个其他答案（包括已接受的答案）已经建议的内容。新的答案，尤其是旧问题的答案，应该提出新的解决方案，而不是重复或重复旧的解决方案。以上是关于CSS Margin: 0 未设置为 0的主要内容，如果未能解决你的问题，请参考以下文章