如何删除 HTML 标头上方的空格（边距）？

Posted 2023-03-06

【中文标题】如何删除 HTML 标头上方的空格（边距）？

【英文标题】：How can I remove space (margin) above HTML header?

【发布时间】：2013-01-03 15:08:11

【问题描述】：

我正在创建一个网站。

我已经编写了 html 部分，现在我正在编写样式表。但是我的标题上方总是有一些空间。如何删除它？

我的 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>

【问题讨论】：

您使用哪种浏览器？在 Opera 12.12 中，

html, *, body 边距：0px;填充：0px；

【参考方案1】：

试试：

h1 
    margin-top: 0;

您正在看到margin collapsing 的效果。

【讨论】：

感谢，关于margin collapsing的文章的链接，它澄清了初学者通常会遇到的许多问题。

@eddard.stark 如果可行，您应该接受答案

【参考方案2】：

试试margin-top：

<header style="margin-top: -20px;">
    ...

编辑：

现在我发现相对位置可能是更好的选择：

<header style="position: relative; top: -20px;">
    ...

【参考方案3】：

当您开始创建网站以重置所有边距和填充时，这是一个很好的做法。所以我建议一开始就简单做：

*  margin: 0, padding: 0 

这将使所有元素的边距和内边距为 0，然后您可以根据需要设置它们的样式，因为每个浏览器都有不同的元素默认边距和内边距。

【讨论】：

小心使用 * 选择器。这对性能非常不利。我认为您应该考虑使用像 Eric Meyer meyerweb.com/eric/tools/css/reset

这样的重置 css

【参考方案4】：

可能是h1 标签导致了问题。应用margin: 0; 应该可以解决问题。

但是您应该为每个新项目使用 CSS 重置，以消除浏览器的一致性和类似您的问题。最著名的可能是 Eric Meyer 的：http://meyerweb.com/eric/tools/css/reset/

【讨论】：

你的意思是边距：0px;

Linters 甚至会突出显示您的版本：github.com/CSSLint/csslint/wiki/Disallow-units-for-zero-values

哦，好吧，我不知道。感谢您的澄清。

【参考方案5】：

为防止将来出现意外的边距和其他特定于浏览器的行为，我建议您在样式表中包含 reset.css。

请注意，您必须设置 h[1..6] 字体大小和粗细，以使标题在此之后再次看起来像标题，以及许多其他事情。

【参考方案6】：

我通过添加边框解决了空间问题，并通过设置负边距来删除。不知道根本问题是什么。

header 
  border-top: 1px solid gold !important;
  margin-top: -1px !important;

【参考方案7】：

为了完整起见，将 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>

【参考方案8】：

这个 css 允许 chrome 和 firefox 正常渲染我页面上的所有其他元素并删除我的 h1 标签上方的边距。此外，随着页面大小的调整，em 比 px 效果更好。

h1 
  margin-top: -.3em;
  margin-bottom: 0em;