Html 移除 CSS 中的正文边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30208335/
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
Removing body margin in CSS
提问by p3nchan
I'm new to web development, and met a problem when removing margin of body.
我是 Web 开发的新手，在删除正文的边缘时遇到了问题。
There's space between the very top of the browser and "logo" text. And my code is here on jsbin.
浏览器顶部和“徽标”文本之间有空间。我的代码在 jsbin 上。
Is body { margin: 0;}wrong if I'd like to remove the space?
body { margin: 0;}如果我想删除空间是错误的吗？
回答by andeersg
I would say that using:
我会说使用：
* {
margin: 0;
padding: 0;
}
is a bad way of solving this.
是解决这个问题的糟糕方法。
The reason for the h1 margin popping out of the parent is that the parent does not have a padding.
h1 边距从父级中弹出的原因是父级没有填充。
If you add a padding to the parent element of the h1, the margin will be inside the parent.
如果向 h1 的父元素添加填充，则边距将在父元素内。
Resetting allpaddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.
将所有填充和边距重置为 0 会导致很多副作用。那么最好删除这个特定标题的margin-top。
回答by Bj?rn Helgeson
Some HTML elements have predefined margins (namely: body, h1to h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquoteand dd).
一些HTML元素具有预定义的余量（即：body，h1到h6，p，fieldset，form，ul，ol，dl，dir，menu，blockquote和dd）。
In your case it's the h1causing your problem. It has { margin: .67em }by default. If you set it to 0 it will remove the space.
在您的情况下，这是h1导致您的问题的原因。{ margin: .67em }默认情况下它有。如果将其设置为 0，它将删除空格。
To solve problems like these generally, I recommend using your browser's dev tools. For most browsers: right-click on the element you want to know more about and select "Inspect Element". In the "Styles" tab, at the very bottom, you have a CSS box-model. This is a great tool for visualising borders, padding and margins and what elements are the root of your styling headaches.
要解决此类问题，我建议您使用浏览器的开发工具。对于大多数浏览器：右键单击要了解更多信息的元素，然后选择“检查元素”。在“样式”选项卡的最底部，您有一个 CSS 盒模型。这是一个很好的工具，用于可视化边框、填充和边距以及哪些元素是您的样式问题的根源。
回答by C?????N????
You've still got a margin on your h1tag
你的h1标签仍有余量
So you need to remove that like this:
所以你需要像这样删除它：
h1 {
margin-top:0;
}
回答by Rahul Tripathi
The issue is with the h1header margin. You need to try this:
问题在于h1标题边距。你需要试试这个：
h1 {
margin-top:0;
}
回答by Mladen Or?oli?
This should help you get rid of body margins and default top margin of <h1>tag
这应该可以帮助您摆脱<h1>标签的正文边距和默认顶部边距
body{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
回答by Spawn
I would recommend you to reset all the HTML elements before writing your css with:
我建议您在使用以下内容编写 css 之前重置所有 HTML 元素：
* {
margin: 0;
padding: 0;
}
After that, you can write your custom css, without any problems.
之后，您可以编写自定义 css，没有任何问题。
回答by Vinayak
You can use body or * to make margin and padding 0px;
您可以使用 body 或 * 使边距和填充为 0px；
*{
margin: 0px;
padding:0px;
}
回答by Darian
The right answer for this question is "css reset".
这个问题的正确答案是“css reset”。
* {
margin: 0;
padding: 0;
}
It removes all default margin and padding for every object on the page, no holds barred, regardless of browser.
它删除页面上每个对象的所有默认边距和填充，不限制任何浏览器。
回答by wardheed
I found this problem continued even when setting the BODY MARGIN to zero.
我发现即使将 BODY MARGIN 设置为零，这个问题仍然存在。
However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.
然而，事实证明有一个简单的解决方法。你需要做的就是给你的 HEADER 标签一个 1px 的边框，并将 BODY MARGIN 设置为零，如下所示。
body { margin:0px; }
header { border:1px black solid; }
You may also need to change the MARGIN to zero for any H1, H2, etc. elements you have within your HEADER div. This will get rid of any extra space which may show around the text.
您可能还需要将 HEADER div 中的任何 H1、H2 等元素的 MARGIN 更改为零。这将消除可能显示在文本周围的任何额外空间。
Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.
不知道为什么会这样，但我使用 Chrome 浏览器。显然，您也可以更改边框的颜色以匹配您的标题颜色。
回答by R?sh?Kêsh Kümar
Just Remove The Browser Default
MarginandPaddingApply Top Of Your Css.
只需删除浏览器默认值
Margin并Padding应用顶部的 Css。
<style>
* {
margin: 0;
padding: 0;
}
</style>
NOTE:
笔记：
- Try to Reset all the
html elementsbefore writing your css.
html elements在编写 css 之前尝试重置所有内容。
OR[ Use This In Your Case]
或[ Use This In Your Case]
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style>
DEMO:
演示：
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style><html>
<head>
</head>
<body>
<h1>logo</h1>
</body>
</html>