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!

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

HTML

Ray Mak
Ray Mak
4,667 Points
Posted by Ray Mak
Ray Mak
4,667 Points

How to remove white space top of head?

Hello,

I am learning HTML and I created header, body with section element, and footer. So some reason I am unable to remove whitespace from top of header section. I believe it is CSS issue maybe.

Any help will be appreciated.

Thanks,

Ray

13 Answers

Philippe Parmentier
Philippe Parmentier
9,517 Points
Philippe Parmentier
Philippe Parmentier
9,517 Points

is this "how to make a website" project? i did it too. In my files, I see normalize but also he did body { margin:0;} may be this is what solves also your issue? from my little practice, i don't know all the default values of the different browsers and i find them behaving weird. I try to follow best practices. one of my teachers was using eric meyer reset. Eric meyer did several books and does explain why. the *{padding:0;margin:0;} resolves the inconsistency between browsers but it applies on all elements. so it applies also on form, input, select and textarea tags too. so there are improved resets...but at the end of the day, after a lot of practices, you may end up having your own default values, aka prefered settings. good luck. may be I will understand what Pedro was talking about. I am not really sure now...

Brett Kim
Brett Kim
11,576 Points
Brett Kim
Brett Kim
11,576 Points

Please show me your code so I can help :)

Pedro GCA
Pedro GCA
20,683 Points
Pedro GCA
Pedro GCA
20,683 Points

Hello Ray,

The problem here is not a reset, don't worry about it right now. You will learn about reset and normalize following the course.

Add this to your css:

#banner h1 {
    padding:0;
    margin: 0;
}

I hope now you understood what was happening, If not just ask here and then I can clarify it better.

Ray Mak
Ray Mak
4,667 Points
Ray Mak
Ray Mak
4,667 Points

Philippe,

Pedro's solution only worked on full size browser. However, when I shrink the browser to smallest, the whitespace shows up again. So your code fixes it for any size browser.

I am still curious why CSS reset is been used to fix it. In intro to how to make website, I didn't see any css reset videos that would help me understand why it is needed. I also downloaded Nick's Pettit entire project, and I don't see any css reset performed. I am building site using his videos and html and css codes that I learned.

Patryk Nowak
Patryk Nowak
14,102 Points
Patryk Nowak
Patryk Nowak
14,102 Points

Show us your code. Use codepen.io or jsbin.com or something else :)

Ray Mak
Ray Mak
4,667 Points
Ray Mak
Ray Mak
4,667 Points

After googling I found this css code that worked for me:

  • { margin: 0; padding: 0; }
Philippe Parmentier
Philippe Parmentier
9,517 Points
Philippe Parmentier
Philippe Parmentier
9,517 Points

weird. you are positive Pedro? I need to do also *{padding:0;marging:0} to remove all the white spaces still existing. just on the h1, it's not enough for me...

Ray Mak
Ray Mak
4,667 Points
Ray Mak
Ray Mak
4,667 Points

Hello Pedro,

Thanks for your suggestion and fixed it for me :) I am still not clear why making change to banner h1 would fix the problem. I will look for the course for css reset and normalization for clear understanding.

:)

Ray Mak
Ray Mak
4,667 Points
Ray Mak
Ray Mak
4,667 Points

Pedro,

The problem was fixed with full width browser, but when I resize the browser to small the whitespace shows up again.

Philippe Parmentier
Philippe Parmentier
9,517 Points
Philippe Parmentier
Philippe Parmentier
9,517 Points

Pedro solution worked for you, Ray? I tried it on your code and only your solution was solving what I thought was your problem...so I must have seen something else...the white space issue I am having is due to the interpretation of the languages by the browsers. they have their own default values...we must not talking about the same issue then

Ray Mak
Ray Mak
4,667 Points
Ray Mak
Ray Mak
4,667 Points

Yes I was using how to make a website course to learn html and css. Thats true, after adding body margin to zero, it worked for me as well. However, I learned something new today which is css reset. :)