Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
dijanadenic
2,198 PointsPersistent blank space above header
I tried applying all the changes from posts with this same problem(i read them all before asking this) but nothing worked. whatever i do,the blank space is still there. Please help
thanks
Kerry Collier
16,151 PointsNever mind, I see what you mean. Give me a second to test something, I think I know what it is...
Jason Anello
Courses Plus Student 94,610 PointsHi Dijana,
I noticed a few issues that you had in your html. These are unrelated to your header gap problem you were having.
In your navigation you used the class "wrapper" instead of "selected"
<li><a href="index.html" class="wrapper">Portfolio</a></li>
If you change that class to "selected" then you'll notice that the portfolio link will be that darker green color when you are on the portfolio page.
You're also missing the #wrapper div that should surround your section and footer elements. You have the styles for it in your css but you're missing the div in your html.
The overall structure should be like this:
<header>
</header>
<div id="wrapper">
<section>
</section>
<footer>
</footer>
</div>
5 Answers
tylerpostuma2
5,175 PointsHey Dijana!
Your code looks really good right now, except for one thing! By default, paragraph tags have margin on the top of them, so all you have to do is:
p { margin-top: 0; }
Hope this helped!
Happy coding!
Jason Anders
Treehouse Moderator 145,863 PointsModerator Edited: Moved Tyler Postuma's response from a "Comment" to "Answer" so it may be upvoted or marked as best answer.
Nice answer! :)
Now a question. I don't work in the front-end very often (and am NOT a designer), but I would like to understand how changing the p tag top margin fixed the issue ('cuz it did), but there is not p tag until well after the <h1> in the header and the nav and the unordered list... then there's a <p> tag. So, how does it's margin affect the top of the page?
dijanadenic
2,198 PointsThat's a great eye for detail! I remember there was one margin-top throughout the lesson but i failed to save the workspace on time and forgot to correct it afterwards. It worked, thank you very much :) p.s. true, it's weird i had to put an additional p tag to fix this
Kerry Collier
16,151 PointsI'm also curious, I tested this in his code, and it did fix it, but I went back to mine to try to see what I did, and I don't have that gap and I don't have that in mine...so now I'm not sure how I did it! lol I think I need to go back and review some stuff now cause I'm confused lol
tylerpostuma2
5,175 PointsHey Jason!
I can't tell you exactly why or how it does that, but the p tag at the very bottom of the page that says 'Gallery will go here' has a total 1583px. I'm pretty sure that because it's in google chrome, it automatically adds margin to the top and bottom of the paragraph tag! Sorry about the choppy description, but I found out through the web inspect and developer console!
No problem Dijana, glad I could help!
Kerry Collier
16,151 PointsAh, that's probably it. I don't have that in mine now, so if that was causing it, that explains my confusion lol Thanks all!
Jason Anello
Courses Plus Student 94,610 PointsHey Jason Anders ,
The header gap problem is a combination of vertical margin collapsing, the floated header and the floated list items within the gallery ul.
Whenever 2 vertical margins are touching each other they will collapse and form a single margin. If there is no content, padding, or borders to keep the margins separated then they will collapse. Vertical margins on floated elements do not collapse.
Since the ul only contains floated children it will collapse to zero height. It's bottom and top margins are therefore touching each other.
This means that the paragraphs top margin is touching the bottom and top margins of the ul which in turn touches the top margin of the section element which in turn touches the top margin of the wrapper div. Those 5 margins combine to form a single margin. If any of those margins are greater than 0, you'll get a gap.
The reason it puts the gap above the header is because the header itself is floated. This means that the content box for the wrapper div, and in turn the other elements mentioned, extend all the way to the top of the header. The margin extends out from the content box which happens to coincide with the top of the header.
If the ul had the clearfix hack applied to it to prevent it from collapsing, or if it had a top or bottom border, these would act to physically separate the paragraphs top margin from collapsing with the ul's top margin and the gap would have gone away.
In my opinion, zeroing out the offending margins doesn't fix the underlying issue and only hides the problem. Plus it's restrictive from a design point of view. There can be quite a few elements that you're not allowed to have a margin on.
Since the header is floated, the wrapper div which immediately follows the header should have been styled to clear the float. Much like the footer has clear: both in order to clear the floated gallery items that came before it.
#wrapper {
clear: both;
}
You'll still have vertical margin collapsing but those margins will no longer be able to reach the top and cause a gap.
dijanadenic
2,198 PointsThat little paragraph complicated it :D I also tried removing it completely because it doesnt really serve any purpose and that was it,no signs of a problem
tylerpostuma2
5,175 PointsThose dang paragraphs :D
Kerry Collier
16,151 PointsYeah, that's how mine was and why I was confused lol How strange.
tylerpostuma2
5,175 PointsHey Kerry,
I think that it's just in Dijana's code, for some reason his 'p' tag is SUPER big. I'll try to figure out why, but that's the main reason why it's so large, and adding the margin to the top :D
Kerry Collier
16,151 PointsYeah, I don't have that p tag so that would be why. It's been a bit so I couldn't recall what was up. I thought they did go over it in that course, and I knew it had to do with the margin on something, but couldn't find what I did! Thanks!
tylerpostuma2
5,175 PointsNo problem!
Kerry Collier
16,151 PointsJust threw a <p> tag in there and sure enough, it did the same thing. How odd.
tylerpostuma2
5,175 PointsHmmm, still not sure what it could be, when you put your <p> tag in, did it show up at the very bottom of the page? Or somewhere in the middle of the page? When I changed the height and width of the <p> element, it went to the bottom of the page, instead of the middle of the page.
Kerry Collier
16,151 PointsNo, I put the tag in between the section tag for the gallery and the footer, so since the gallery is floated, it is showing up in the middle to the right. Wonder if it has something to do with that? Let me see what happens when I try it elsewhere.
tylerpostuma2
5,175 PointsThat could be it...
Kerry Collier
16,151 PointsNo, doesn't seem to matter. Very odd. I'm googling to see if there's an answer out there as to why lol
tylerpostuma2
5,175 PointsYeah, I tried to google it, just didn't really know how to word it haha.
dijanadenic
2,198 PointsWell I-m known to have such weird issues...like when you keep getting stuck in weird corners in a video game. there will probably be more in the future,lol
tylerpostuma2
5,175 PointsIf you need anymore help with anything, just post another post to the forums, i'm sure somebody will help :D
Kerry Collier
16,151 PointsHey, the weird problems are how you learn. When things go smooth, you tend to forget lol I know I'll remember this now!
Kerry Collier
16,151 PointsKerry Collier
16,151 PointsWhere are you seeing the blank space? I just want to be sure I'm looking for the right thing!