CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 686

Why would changing the margin of a header tag move its parent and grandparent elements?

I have an h1 tag that, when I change its margin-top property, it moves the parent and grandparent elements as well. Can anyone explain why this would occur and how to fix it?

If you notice, when the h1 margin is set to 0 auto the two sections have the correct gutters between them.

Pen1

<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 set the h1 element to have a margin, doing so moves the parent div and grandparent section elements.

Pen2

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

Upvotes: 2

Views: 18

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

That's called "margin collapse". The margin is collapsing outside of the parent.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

One way to fix it would be to add overflow: hidden to the parent

section{
	margin-bottom: 10px;
	width: 100vw;
	height: 100vh;
	background-color: red;
	overflow: hidden;
}

section:nth-of-type(2){
	background-color: blue;
}

.notice{
	width: 100vw;
	height: 10vh;
	text-align: center;
}

.notice h1{
	margin: 50px auto;
}
<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>

Or you can use padding instead of margin

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: auto;
	padding: 50px 0;
}
<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>

Upvotes: 2

Related Questions