【问题标题】: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>

【讨论】: