I'm facing an issue with the h1 tag where changing its margin-top property also affects the parent and grandparent elements. Can someone shed light on why this is happening and provide a solution?
If you observe, setting the h1 margin to 0 auto creates the correct spacing between the two sections.
<section></section>
<section>
<div class="notice">
<h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
</div>
</section>
section{
margin-bottom: 10px;
width: 100vw;
height: 100vh;
background-color: red;
}
section:nth-of-type(2){
background-color: blue;
}
.notice{
width: 100vw;
height: 10vh;
text-align: center;
}
.notice h1{
margin: 0 auto;
}
However, once I add a margin to the h1 element, it causes the parent div and grandparent section to move as well.
<section></section>
<section>
<div class="notice">
<h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
</div>
</section>
section{
margin-bottom: 10px;
width: 100vw;
height: 100vh;
background-color: red;
}
section:nth-of-type(2){
background-color: blue;
}
.notice{
width: 100vw;
height: 10vh;
text-align: center;
}
.notice h1{
margin: 50px auto;
}