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

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

Posted by YAWEI SONG
YAWEI SONG
9,168 Points

How to delete the problematic margin on the top of the page?

Nick said that if I set the margin-top as 0, it will delete problematic margin on the top of the page. I have tried it at first, but it doesn't work.

header { background: #6ab47b; border: #599a68; margin-top: 0; padding-top: 0; width: 100% }

However, when I added "float: left ", the problematic margin disappeared. So is the problematic margin relative to "float"?

header { background: #6ab47b; border: #599a68; margin-top: 0; padding-top: 0; width: 100%; float: left; }

then I tried to delete float and set padding as 5px, the problematic margin disappeared，too. So is the problematic margin relative to "padding"?

header { background: #6ab47b; border: #599a68; margin-top: 0; padding-top: 5px; width: 100%; }

5 Answers

YAWEI SONG
YAWEI SONG
9,168 Points
YAWEI SONG
YAWEI SONG
9,168 Points

I have posted my codes on the top. Now, if I add padding and float to the header, the problematic margin disappears. If i set margin-top to 0, it does't work.

Jacob Brech
Jacob Brech
7,224 Points
Jacob Brech
Jacob Brech
7,224 Points

I just set the top margin to -10px, It gets rid of the white space:)

ayezee33
ayezee33
16,088 Points
ayezee33
ayezee33
16,088 Points

Try reading about normalize.css https://necolas.github.io/normalize.css/

I would try adding marigin:0 to your HTML element. So the css would be

html { margin: 0; }

Can you post your code or a codepen if that doesn't work?

Tommy Choe
Tommy Choe
38,156 Points
Tommy Choe
Tommy Choe
38,156 Points

If I remember correctly, you could add a padding to the header.

sibal gesekki
sibal gesekki
3,484 Points
sibal gesekki
sibal gesekki
3,484 Points

so can someone give the answer