Question

试图使页眉触及页面顶部，但是即使没有另外指定，似乎也有自动页边距。

我尝试指定margin-top: 0，并且也将margin: 0设置为正文。

h1 {
  margin-top: 0px;
}

body {
  margin: 0px;
}

  <h1>test</h1>

“测试”标题没有触摸页面顶部，而是在其顶部具有自动边距。

Answer 1

添加line-height: 75%;似乎可以解决问题：

h1 {
  margin-top: 0px;
  line-height: 75%;
}

body {
  margin: 0px;
}

Answer 2

只需为您的h1标签添加line-height。（可选）还为主体设置line-height。

h1 {
  margin-top: 0px;
  line-height: 18px;
}

body {
  margin: 0px;
  line-height: 1.15;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

Answer 3

即使将页边距设置为零后，页眉也没有碰到顶部，这必须归因于行高。尝试设置彩色边框，即边框：1px纯绿色。如果您看到边框触及顶部，则真正的原因是由于行高导致的文本/字体周围的空格。

line-height由html页面中包含的标准css规则设置，以在文本之间创建适当的间距，或者默认情况下将其设置为使用标准值的normal。因此，如果您使用line-height属性减少文本周围的空间，它将达到目的，但我不建议将其减少到小于1：line-height：1

Answer 4

使用大写字母，您将看到您的元素已经在触摸屏幕的顶部，因此将小写字母的位置降低一点是合乎逻辑的。

h1 {
  margin-top: 0px;
}

body {
  margin: 0px;
}

<h1>ÂtestË</h1>

如何使页眉触及页面顶部？

4 个答案: