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

CSS How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by Eric Carlson
Eric Carlson
Courses Plus Student 1,069 Points

Header

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?

tihomirvelev
tihomirvelev
14,109 Points

I don't think the fonts can do such thing. It's better to paste your code so we can check it.

Eric Carlson
Eric Carlson
Courses Plus Student 1,069 Points

Here is the code: header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; border: 0; width: 100%; }

4 Answers

Lorenzo Pieri
Lorenzo Pieri
19,772 Points
Lorenzo Pieri
Lorenzo Pieri
19,772 Points

Hi, 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
PLUS
Eric Carlson
Courses Plus Student 1,069 Points
Eric Carlson
Eric Carlson
Courses Plus Student 1,069 Points

Thank 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
Lorenzo Pieri
19,772 Points
Lorenzo Pieri
Lorenzo Pieri
19,772 Points

By 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
tihomirvelev
14,109 Points
tihomirvelev
tihomirvelev
14,109 Points

The 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
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi 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.