如何删除 HTML 标题上方的空格（边距）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14423781/
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
How can I remove space (margin) above HTML header?
提问by eddard.stark
I am creating a website.
我正在创建一个网站。
I have written the HTML part and now I am writing the stylesheet. But there is always some space above my header. How can I remove it?
我已经编写了 HTML 部分，现在我正在编写样式表。但是我的标题上方总是有一些空间。我怎样才能删除它？
My HTML and CSS code is given below.
我的 HTML 和 CSS 代码如下。
body{
margin: 0px;
padding: 0px;
}
header{
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
}<header>
<h1>OQ Online Judge</h1>
<form action="<?php echo base_url();?>/index.php/base/si" method="post">
<label for="email1">E-mail : </label><input type="text" name="email" id="email1">
<label for="password1">Password : </label><input type="password" name="password" id="password1">
<input type="submit" name="submit" value="Login">
</form>
</header>回答by robertc
回答by benbai123
Try margin-top:
尝试边缘顶部：
<header style="margin-top: -20px;">
...
Edit:
编辑：
Now I found relative position probably a better choice:
现在我发现相对位置可能是一个更好的选择：
<header style="position: relative; top: -20px;">
...
回答by Панайот Толев
It is good practice when you start creating website to reset all the margins and paddings. So I recommend on start just to simple do:
当您开始创建网站以重置所有边距和填充时，这是一种很好的做法。所以我建议一开始就简单地做：
* { margin: 0, padding: 0 }
This will make margins and paddings of all elements to be 0, and then you can style them as you wish, because each browser has a different default margin and padding of the elements.
这将使所有元素的边距和填充为 0，然后您可以根据需要设置它们的样式，因为每个浏览器都有不同的元素默认边距和填充。
回答by Patrick van Efferen
I solved the space issue by adding a border and removing is by setting a negative margin. Do not know what the underlying problem is though.
我通过添加边框解决了空间问题，并通过设置负边距来删除。不知道潜在的问题是什么。
header {
border-top: 1px solid gold !important;
margin-top: -1px !important;
}
回答by yckart
Just for completeness, changing overflowto auto/hiddenshould do the trick too.
只是为了完整性，更改overflow为auto/ 也hidden应该可以解决问题。
body {
margin: 0px;
padding: 0px;
}
header {
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
overflow: auto;
}<header>
<h1>OQ Online Judge</h1>
<form action="<?php echo base_url();?>/index.php/base/si" method="post">
<label for="email1">E-mail :</label>
<input type="text" name="email" id="email1">
<label for="password1">Password :</label>
<input type="password" name="password" id="password1">
<input type="submit" name="submit" value="Login">
</form>
</header>回答by D_4_ni
To prevent unexpected margins and other browser-specific behavior in the future, I'd recommend to include reset.cssin your stylesheets.
为了防止将来出现意外的边距和其他特定于浏览器的行为，我建议在您的样式表中包含reset.css。
Be aware that you'll have to set the h[1..6] font size and weight to make headings look like headings again after that, and many other things.
请注意，您必须设置 h[1..6] 字体大小和粗细，以使标题在此之后再次看起来像标题，以及许多其他内容。
回答by user3139574
This css allowed chrome and firefox to render all other elements on my page normally and remove the margin above my h1 tag. Also, as a page is resized em can work better than px.
这个 css 允许 chrome 和 firefox 正常呈现我页面上的所有其他元素，并删除我的 h1 标签上方的边距。此外，当页面被调整大小时，em 可以比 px 更好地工作。
h1 {
margin-top: -.3em;
margin-bottom: 0em;
}
回答by Rudolf
It is probably the h1tag causing the problem. Applying margin: 0;should fix the problem.
这可能是h1导致问题的标签。应用margin: 0;应该可以解决问题。
But you should use a CSS reset for every new project to eliminate browser consistencies and problems like yours. Probably the most famous one is Eric Meyer's: http://meyerweb.com/eric/tools/css/reset/
但是您应该为每个新项目使用 CSS 重置来消除浏览器的一致性和像您这样的问题。最著名的可能是 Eric Meyer 的：http: //meyerweb.com/eric/tools/css/reset/
