网站顶部的空白 [重复]答案

【问题标题】：Whitespace on top of website [duplicate]网站顶部的空白 [重复]
【发布时间】：2018-11-08 23:33:21
【问题描述】：

我的网站顶部有一个空格，我想删除但不知道如何删除：

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DevDoWeb.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="styleSheet.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <h3 class="headerText">Test</h3>
    </div>
  </body>
</html>

开发工具告诉我它不能是maring、padding 或border....我真的不知道在这里做什么，感谢任何帮助。

【问题讨论】：

标签： html css whitespace

【解决方案1】：

在这种情况下，空白是由浏览器样式表添加到h3 的边距引起的。如果你通过给h3 0 的边距来删除它，你就摆脱了空白。

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

h3 {
  margin-top: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>DevDoWeb.com</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
  <link rel="stylesheet" type="text/css" href="styleSheet.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <div class="header">
    <h3 class="headerText">Test</h3>
  </div>
</body>

</html>

【讨论】：

我刚刚发现正是使用开发工具....我没有看到文本本身的边缘:) 不过谢谢。

【解决方案2】：

试试这个：

h3 {
  margin: 0;
}

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

h3 {
  margin: 0;
}

<div class="header">
  <h3 class="headerText">Test</h3>
</div>

【讨论】：

【解决方案3】：

在您的 CSS 中进行这些更改

body {
border: 0;
padding: 0;
margin: 0;
}

.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
border: 0;
top: 0;

}

【讨论】：

【解决方案4】：

您需要从headerText 中删除margin-top

body {
border: 0;
padding: 0;
margin: 0;
}

.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;

}
.headerText {
  margin-top: 0;
}

&lt;div class="header"&gt;&lt;h3 class="headerText"&gt;Test&lt;/h3&gt;

【讨论】：

【解决方案5】：

将此添加到您的 css 文件之上。

* {
  margin: 0;
  padding: 0;
}

【讨论】：

【解决方案6】：

我强烈建议使用重置样式表，例如Eric Meyers。此链接还解释了它们是什么以及为什么要使用它们。

【讨论】：

我会调查的。谢谢。