Why does adding a margin to an h1 element shift the entire header class?

Question

I'm trying to center a header text on a header background image using HTML and CSS.

I set the background image in the header class:

.header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 320px
}

And then manipulate the text in a .header h1:

.header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  width: 68%;
  padding: 20px;
  margin: 0 auto;
}

If I add to the second code block, the quality position: relative;, then I can manipulate top to achieve my goal.

My confusion is, when I adjust the margin-top property in .header h1, it shifts the entire header, including the background image down, instead of moving the h1 text down on the background image.

My question is why? Why does adjusting the margin of the h1 header element, instead move the entire image?

Thanks Dai- updated to include the "." which is present in my code — agibad, Jun 25 '20 at 15:31

pretzelhammer · Accepted Answer · 2020-06-25T16:00:40.987

The easiest and simplest way to accurately center your h1 inside your header is to add display: flex; justify-content: center; align-items: center; to the header styles. Other approaches using "magic" values for margin or position offsets will be fragile and break if you modify any other variables, e.g. header width, height, header text length, font-size, etc. I recommend using the following approach:

header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  width: 60%;
  padding: 20px;
}

<header><h1>header text</h1></header>

Update: Understanding Margin Collapse

MDN has great documentation on this, but to summarize in a nutshell for your particular example: a child's vertical margin "collapses" with its parent's vertical margin when there is no in-between, e.g. padding, border, inline content, etc. So when you add margin-top to your h1 nested inside your header it "collapses" with the header's vertical margin which is why BOTH elements are shifted down. Here's an example:

header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 320px;
}
  
header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  width: 60%;
  padding: 20px;
  margin-top: 100px;
}

<header><h1>header text</h1></header>

If you'd like to prevent margin-collapse there are many solutions, but perhaps the simplest one in this case would be to add overflow: auto to the header like so:

header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 320px;
  overflow: auto;
}
  
header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  width: 60%;
  padding: 20px;
  margin-top: 100px;
}

<header><h1>header text</h1></header>

If you are interested in other approaches to disable margin-collapsing then I recommend reading this StackOverflow answer.

When I add the qualities suggested, it collapses the background image around the text entirely. As a result, the background image is no longer viewable. — agibad, Jun 25 '20 at 15:30
@agibad as others have mentioned, you probably have typos in your CSS and are mixing styles between "header" and ".header" which are 2 different things. — pretzelhammer, Jun 25 '20 at 15:33
This is not the case. It was a typo in my question, which I have fixed, not the code. — agibad, Jun 25 '20 at 15:33
@agibad great, then my answer clearly works, which you can see for yourself by clicking "Run code snippet". If for some reason it doesn't work for you then you must update your question above to describe your new requirements. — pretzelhammer, Jun 25 '20 at 15:35
My problem is also that your solution doesn't answer the fundamental question I was asking: why does adjusting the margin in h1 shift the entire image down instead of centering the text. I get that there are other, better ways to do it. But I'm learning HTML and want to understand why things function the way that they do, not just ignore them and do something different if it doesn't work as expected. — agibad, Jun 25 '20 at 15:39
Thank you! I've learned about margin collapse with respect to adjacent elements, but not as it relates to parent/child elements. I appreciate the resources! — agibad, Jun 25 '20 at 16:55
@agibad If my answer is now satisfactory please accept it by clicking on the grey checkmark icon under the answer score, thanks! — pretzelhammer, Jun 25 '20 at 16:56

Why does adding a margin to an h1 element shift the entire header class?

1 Answers1