MOVE: Step 1 - White space above main image - H1 Margin?


#1

I noticed I have a huge white space above the main background image on step 1.

I decided to add margin: 0 to the H1 tag and voila it goes away.

I checked the CSS but there didn't seem to be any code that was defining that margin on the H1 to begin with.

Is this a bug?

`/* Main */
.main {
width: 1920px;
height: 600px;
background-image: url("https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}

.main h1 {
font-size: 150px;
margin:0px;
}`


#2

the margin of the heading (h1) is relative to the font-size, the bigger the font-size, the more margin-top the heading has.

However, this margin collapsed, causing the gap. So no bug, just collapsing margin


#3

Makes sense, thanks for the help :slightly_smiling:


#4

Adding the margin: 0; to the h1 tag only makes the part of the image that was normaly white close. The only way I can get the entire image to display properly is by adding a border to the .main element.

Getting really frustrated.


#5

What exactlly is your question? Do you have question? Why revive a 1 year old topic?


#6

I find this confusing as well. My question is, why would the image that is in the first div of the body not automatically start at the very top of the web page? If you add the image first to the main div and save, then the image starts at the very top of the page with no space. If you add the header, paragraph and link to the container div within the main div without setting margin to the header to 0, then it pulls the image lower on the page presenting the white space.

Why does the content within a div of the main div affect where the main div sits on the page?


#7

because of collapsing margin? Did you read this? it explains when this occurs.


#8

Given how many lessons I've gone through in the past week, if I had read it I'm sure I probably wouldn't remember. For someone who has no programming experience, it is quite a lot of information to take in. Plus, I don't recall where in any of the lessons that I have been instructed to read that entire page of information. The lessons link out often to resources, which is great, but specific instructions such has "hey, read all of this start to finish" have not been given. Of course, I could have overlooked it.

Thank You.


#9

collapsing margin isn't anywhere in the course, its the just the phenomenon causing your problem. But given you replied to this topic, you should have read the rest of the topic:

which would have explained the problem?


#10

I read the topic, just overlooked the hyperlink.