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 trialJosh Jones
2,894 PointsI have a white space above the header that I can't get rid of.
What am I doing wrong that this whit space above the heading is appearing? Here is a snapshot: http://w.trhou.se/wywg67xl41
5 Answers
Erik Nuber
20,629 PointsIt is in your header element you need to at 5px to the top of the padding. This will push the box up and give you more space around the content.
header {
float: left;
margin 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
height: 100%;
}
Also, you have a weird tick mark that is causing you some grief too. It is next to the <link> in your head area.
Josh Jones
2,894 PointsGreat! Thanks for that. Didn't even notice the tick mark, but it definitely helped removing it.
M W
3,446 Pointscant see the code anymore but would setting the css with this work? [insert an asterix before the curly bracket. Wont allow me to type one for some reason!!]
'Asterix here!'{ margin: 0; padding 0; } work too? I've had lots of issues myself with gaps appearing at the top of pages and the answers I seemed to come across regularly was use some sort of CSS Reset. So for me I just do a simple one using the universal selector "*" and remove browser preset margins and padding.
Erik Nuber
20,629 PointsI think in this case it was because of the tick mark he had. If it hadn't been there the code would have worked as it was. I just used the info that the video had an moved the padding on the top to 5px so that the header text wasn't so close to the top of the page.
You can use the CSS Reset however, I think that each situation is unique in doing so. Reset will mean you have to code everything out, there is no standard set versus normalize which will give you a basic beginning and make things a bit more uniformed. You still need to set your own styles but thus far my preference has been normalize.
The only thing I have done in addition to that is I like to set the universal marker to border-box
*
*:before
*:after {
box-sizing: border-box;
}
so that I get the consistency with all tags.
M W
3,446 PointsYes I see what you mean. I think working on the exercises within Treehouse then issues like resets should'nt be required. When I'm working outside of here I have been getting many due to browser resets. The padding and margin zeroing that i mentioned has been useful for me (though maybe setting them just to body and h1 would be enough )
:)
Erik Nuber
20,629 PointsI set a default just like you are suggesting on tags for my portfolio site and, changed them as I needed to on any given page. So if you have a default of
body {
margin: 0;
padding: 0;
}
you can always go and add an ID or class to the body or better yet to the page wrapper and then use child selectors to make changes to the body or h1 tags as needed.
M W
3,446 PointsI found this really useful - http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
M W
3,446 PointsOh I just realised this was'nt your original question! lol....that's why I sent the link for you! Well that article is interesting anyway :)