div和屏幕顶部之间的差距

Question

我遇到问题，div“名称”与屏幕顶部之间存在差距。我已经完成了一些研究，所有我能找到的是margin，我已经设置了position: absolute;，它与div的位置混淆了。这个差距不是早些时候我没有知道我做了什么让它出现。

这是我的代码：

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>

Answer 1

这是由collapsing margins

引起的

删除h1上的上边距以创建所需的效果。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在df['p1'].apply(lambda x: float(x.replace('\xa0','')))元素上设置margin: 0。

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:0;
}