【发布时间】：2015-07-24 08:35:16
【问题描述】：
我是 Web 开发的新手，在删除正文的边距时遇到了问题。
浏览器的最顶部和“徽标”文本之间有空格。我的代码是here on jsbin。
如果我想删除空格，body { margin: 0;} 错了吗？
【问题讨论】：
【发布时间】：2015-07-24 08:35:16
【问题描述】：
我会说使用：
* {
margin: 0;
padding: 0;
}
解决这个问题的方法很糟糕。
h1边距从parent中弹出的原因是parent没有padding。
如果给 h1 的父元素添加内边距，边距将在父元素内。
将所有内边距和边距重置为 0 会导致很多副作用。那么最好去掉这个特定标题的 margin-top。
【讨论】：
-
有什么副作用？我唯一知道的是，像这样重置性能可能会更好：body, div, p, a, img, h1, h2 ....{padding:0;边距：0;}
-
你必须做更多的工作来重新应用边距和/或填充到你想要的元素（你可以完全控制，但你必须做更多的工作）。当然，所有这些都是编码人员的偏好，但对我来说，我更喜欢“normalize.css”而不是“reset.css”。
-
是的。我以前听说过这个。也许尝试使用 normalize 更有针对性地重置边距/填充。谢谢！
-
感谢 andeersg 的提示，为主体添加填充以防止任何边距重叠。这个技巧解决了我遇到的许多布局问题，值得一个专门的网页和神殿！
某些 HTML 元素具有预定义的边距（即：body、h1 到 h6、p、fieldset、form、ul、ol、dl、@9876 @、menu、blockquote 和 dd)。
在您的情况下，是 h1 导致您的问题。默认情况下它有{ margin: .67em }。如果将其设置为 0，它将删除空格。
为了解决此类问题，我建议您使用浏览器的dev tools。对于大多数浏览器：右键单击您想了解更多信息的元素，然后选择“检查元素”。在“样式”选项卡的最底部，您有一个 CSS 盒子模型。这是可视化边框、填充和边距以及哪些元素是您的样式问题的根源的绝佳工具。
【讨论】：
我建议您在编写 CSS 之前重置所有 HTML 元素：
* {
margin: 0;
padding: 0;
}
之后，您可以编写自定义 CSS，没有任何问题。
【讨论】：
您的h1 标签上仍有余量
所以你需要像这样删除它：
h1 {
margin-top:0;
}
【讨论】：
问题在于 h1 标头边距。你需要试试这个：
h1 {
margin-top:0;
}
【讨论】：
这应该可以帮助您摆脱 <h1> 标签的正文边距和默认上边距
body{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
【讨论】：
这个问题的正确答案是“css reset”。
* {
margin: 0;
padding: 0;
}
它会删除页面上每个对象的所有默认边距和内边距，不限制任何浏览器。
【讨论】：
只需删除浏览器默认
Margin和Padding应用顶部的 Css。
<style>
* {
margin: 0;
padding: 0;
}
</style>
注意：
- 在编写 CSS 之前尝试重置所有
html elements。
或 [Use This In Your Case]
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style>
演示：
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style><html>
<head>
</head>
<body>
<h1>logo</h1>
</body>
</html>【讨论】：
你可以使用body或*来使margin和padding为0px；
*{
margin: 0px;
padding:0px;
}
【讨论】：
我发现即使将 BODY MARGIN 设置为零，这个问题仍然存在。
但事实证明有一个简单的解决方法。你需要做的就是给你的 HEADER 标签一个 1px 的边框，以及将 BODY MARGIN 设置为零，如下所示。
body { margin:0px; }
header { border:1px black solid; }
您可能还需要将您在 HEADER div 中的任何 H1、H2 等元素的 MARGIN 更改为零。这将消除文本周围可能显示的任何额外空间。
不知道为什么会这样，但我使用的是 Chrome 浏览器。显然你也可以改变边框的颜色来匹配你的标题颜色。
【讨论】：