How come the top margin needs to be a negative value?


#1

https://www.codecademy.com/courses/web-ext/projects/html-css-prj_move

I fixed this by setting my main class in css to margin-top: -140px;

From what I understand margin of 0 should have worked, but for some reason didn't. In my case I had to manually set the top margin to a negative value.


Position problem with HTML & CSS Project MOVE
#2

Funny, I used -135px to the same end. Something in normal flow is taking up that space. What is it? (Rhetorical, since I don't know yet, either.) We will have to investigate further, won't we?

Edit:

I'm not going to say this is the culprit, but it does look suspicious:

.supporting {
  text-align: center;
  padding: 50px 0 80px;
  background: #1f1f1f
}

Top and bottom padding. 50 + 80 is 130. Coincidence?

Probably nothing. Will keep sleuthing, and I hope you are doing the same. Just saying...


#3

really? Did you bother to read the topic you replied to? I explained collapsed margin in there, which is the what you deal with.

it causes the huge gap


#4

Not sure to whom you are referring. I personally didn't read that thread, only split it on a year late post.


#5

i was referring to my explanation, which explained the underlying cause, and possible fixes


#6

Yeah I followed up the links. Was actually hoping the member would dig a little on his own, rather than walking away from a solution that didn't make sense.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.