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 trialEric Carlson
Courses Plus Student 1,069 PointsHeader
I am following along outside of the class and using Nick's code with my own fonts etc... Though I utilized Nick's CSS code for the header, I still have that annoying space at the top of the page. I am using different fonts, could this be the issue?
Eric Carlson
Courses Plus Student 1,069 PointsHere is the code: header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; border: 0; width: 100%; }
4 Answers
Lorenzo Pieri
19,772 PointsHi, not sure I got your problem, but Ill give it a try.
We know that BROWSERS apply a BASIC STYLING to all of our pages. This BASIC STYLING is simply changed by us whenever we apply our own style (CSS inline,on page, stylesheet). One of the thing that usually browsers do is to apply a 4mm blank space uptop (Not sure if MARGIN or PADDING, tho). To avoid such thing, do the following:
* {
margin: 0;
padding: 0;
border: 0;
}
/*The starry symbol * is the UNIVERSAL SELECTOR!*/
Otherwise you can also use reset.css or normalize.css
Have the best day!
Eric Carlson
Courses Plus Student 1,069 PointsThank you for the response!! Here is my code: header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; border: 0; width: 100%; }
Lorenzo Pieri
19,772 PointsBy setting the margin property bottom to 30px, you are "sending away" the header 30px to the direction of BOTTOM. Thats probably why you have the blank space. (infact the BG color value is white in the tutorial or well, set to inherit as browser styling!) XD
tihomirvelev
14,109 PointsThe problem is not the css rule for the header.
There is a default margin for the body of the document, so the easiest way is to remove it with a simple body rule.
body {
margin: 0; /* this will set all four margins (top, right, bottom and left) to 0*/
}
The other way is to do what Lorenzo Pieri suggested before my comment and remove all the margins and paddings for all elements of the document first and after that overwrite them with your own rules.
Jason Anello
Courses Plus Student 94,610 PointsHi Eric,
normalize.css should set the body margin to 0. Are you sure that normalize is linked properly?
Add clear: both;
to your existing #wrapper
rule and see if that gets rid of the gap.
#wrapper {
clear: both;
}
It's a good idea to clear the floated header anyways for other problems so I would leave this in even if it doesn't fix the gap problem.
If it does fix the gap problem then it could mean you have a problem with your gallery html or css. A top margin on your gallery will produce a gap above the header if it isn't cleared.
If clearing fixes the gap then i would post your gallery related html and css so somebody can take a look at that.
tihomirvelev
14,109 Pointstihomirvelev
14,109 PointsI don't think the fonts can do such thing. It's better to paste your code so we can check it.