CSS <div> 奇怪的顶部填充

Question

我是 Web 开发的新手，目前正在为我母亲的公司开发一个 Web 应用程序。 我一直坚持在背景图像上方编写文本块，并且在 div 中出现了奇怪的顶部填充。我不知道它来自哪里，所以我可以删除它并从那里开始工作，添加额外的填充并将更多的 css 应用到 .text-block。

谈论这个：

$(window).scroll(function() {
  var sticky = $('.main-banner'),
    scroll = $(window).scrollTop();
});

html,
body {
  font-family: cursive, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.main-banner {
  width: 100%;
  height: 60px;
  background-color: #51ad89;
  box-shadow: 2px 2px 5px grey;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-nav a {
  text-decoration: none;
  color: black;
  font-size: 18px;
  text-shadow: 2px 2px 5px #ccdbd5;
  margin: 0px 80px 0px 80px;
}

.main-nav a:hover {
  /*text-decoration: underline;*/
  color: #e6f0ec;
}

.main-nav img {
  display: flex;
  align-items: center;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.main-div img {
  width: 100%;
}

.main-div {
  position: relative;
}

.text-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.678);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="main-banner" id="stickyHeader">
  <nav class="main-nav">
    <a href="">О студии</a>
    <a href="">Услуги</a>
    <img src="/src/tree.png" height="60px" width="60px">
    <a href="">Работы</a>
    <a href="">Контакты</a>
  </nav>
</header>
<section class="main-div">
  <img src="/src/mainphoto.png">
  <div class="text-block">
    <p>СТУДИЯ «GREEN ERA»</p>
    <p>АВТОРСКИЙ ЛАНДШАФТНЫЙ ДИЗАЙН</p>
    <button>Консультация дизайнера</button>
  </div>
</section>

Answer 1

您可以将 <p> 元素的顶部边距设置为 0；

p {
  margin-top: 0;
}

Answer 2

这是因为

标签的默认边距 see the picture。 使用 或

代替。