CSS <div> strange top padding [duplicate] - html

Question

This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 1 year ago.
Im new to web development and currently developing a webapp for my mothers company.
I'm stuck on writing text block above the background image and I'm getting strange top padding in the div. I can't figure out where that comes from so I can remove it and work from there, adding additional padding and applying more css to the .text-block.
Talking about this one:
$(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">
О студии
Услуги
<img src="/src/tree.png" height="60px" width="60px">
Работы
Контакты
</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

You can set the margin on the top to 0 for your <p> elements;
p {
margin-top: 0;
}

Answer 2

It is because of <p> tag's default margin see the picture.
Use a <span> or <div> instead.