Innovation Cloud - Step 5

What causes the whitespace above the footer? Using devtools, it looks like it’s caused by the paragraph element within the footer - it’s margin to be precise. But I can’t seem to recreate this problem in a fiddle.

Note: I got rid of this whitespace setting the paragraph element’s display property to inline-block, but I don’t understand why this worked.


I think I understood that I could also get rid of the whitespace by giving the paragraph within the footer a margin of 0. But I didn’t stick with this route because I thought I needed to use margin to be able to move the paragraph element to it’s appropriate place within .footer .container.

While working on Move, I was reviewing the code for Innovation Cloud, and noticed that the already existing code was using relative positioning to put .container's in the right place. This is much better than using display:inline-block on the paragraph element as I was doing previously. There was probably a reason why I couldn’t understand why that solution worked. Great realization!

Figure something like this will happen to a lot of people. Using/explaning CSS resets before this might be beneficial. It also doesn’t help that the mock/solution uses line-height to position things appropriately in the footer - that doesn’t seem the best way of going about this in relation to how things are positioned earlier.

1 Like