div和屏幕顶部之间的间隙[重复]答案

【问题标题】：gap between a div and the top of the screen [duplicate]div和屏幕顶部之间的间隙[重复]
【发布时间】：2018-03-22 01:44:56
【问题描述】：

我遇到了div“名称”和屏幕顶部之间的间隙问题。我已经做了一些研究，我能找到的只是我已经设置的margin 和与 div 的位置混淆的position: absolute;。之前的差距不在这里，我不知道我做了什么让它出现。

这是我的代码：

body {
  background-image: url("./console.png");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 50px;
  font-family: Brush Script MT;
  text-align: center;
  color: white;
  background-color: black;
}

<div class="name">
  <h1> Clovis Sargenton Callard </h1>
</div>

【问题讨论】：

h1 内的name 可能有一些与之相关的边距。尝试将其设置为 0。例如 h1 { margin: 0; }

标签： html css

【解决方案1】：

这是由collapsing margins引起的

删除h1 的上边距以创建您想要的效果。

body {
  background-image: url("./console.png");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 50px;
  font-family: Brush Script MT;
  text-align: center;
  color: white;
  background-color: black;
}

h1 {
  margin-top: 0;
}

<div class="name">
  <h1> Clovis Sargenton Callard </h1>
</div>

【讨论】：

谢谢你的工作

【解决方案2】：

在 h1 元素上设置 margin: 0。

body {
  background-image: url("./console.png");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 50px;
  font-family: Brush Script MT;
  text-align: center;
  color: white;
  background-color: black;
}

h1 {
  margin:0;
}

<div class="name">
  <h1> Clovis Sargenton Callard </h1>
</div>

【讨论】：