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

Posted by Gabriel Camacho
Gabriel Camacho
2,337 Points

Cant fix top margin

Hello.

I was building a small exercise to see if i was getting the knowledge of the courses right. So after hours of trying i cant get to eliminate the space between the window browser and my first element. (there is always an annoying white space)

here is the html:

<! DOCTYPE HTML> <html> <head> <title>Header Spacing</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css" </head> <body> <header> <h1>Header Spacing</h1> <h2>subheader</h2> </header> <div id="wrapper"> <section> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum finibus ante eget maximus. Vivamus maximus dignissim massa id tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </section> </div> <footer> <p>Test | 2016</p>
</footer> </body> </html>

and the css:

wrapper{

max-width: 1000px;
margin: 0 auto;
padding: 0 5%;

}

header{ float: left; margin: 0 0 50px 0; width: 100%; }

h1{ text-align: center; color: #f1f1f1; background: #919191; padding: 20px 0; font-size: 1.7em; }

h2 { text-align: center; color: #f1f1f1; background: darkgreen; padding: 15px 0; margin: -22px 0; font-size: 1em }

body{ background: #f1f1f1; }

p { font-size: 0.8em; color: #919191 }

footer{ background: #cacaca; clear: both; text-align: center; color: #fff; padding: 10px 0; max-width: 100%; }

Thanks for the help. G.

5 Answers

Emily Kolar
Emily Kolar
2,787 Points
Emily Kolar
Emily Kolar
2,787 Points

Try giving the body 0 padding and 0 margin as well.

I'd strongly recommend using a CSS normalize or reset, such as: https://necolas.github.io/normalize.css/

Also, this will change your life:

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

(Explanation: http://www.paulirish.com/2012/box-sizing-border-box-ftw/)

Gabriel Camacho
Gabriel Camacho
2,337 Points
Gabriel Camacho
Gabriel Camacho
2,337 Points

Hi emily.

Thanks for your answer.

  • I added the normalize.css

  • I gave the body 0 padding and margin:

body{ background: #f1f1f1; padding: 0; margin: 0; }

  • i also added this line to my css just as you posted it:

html {box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

but i still have the white space at the top. Dont know what i keep doing wrong its getting frustrating :/

thanks for the info.

Emily Kolar
Emily Kolar
2,787 Points
Emily Kolar
Emily Kolar
2,787 Points

oh man! one more idea: try giving your h1 and h2 zero padding and zero margin as well. i've had h1s mess with me a lot in the past, so i generally give padding on the header-element and strip it out of all my text headers.

flexbox is also super awesome for this type of thing: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

now i think i'm officially out of ideas.

Thomas Buchstab
Thomas Buchstab
14,766 Points
Thomas Buchstab
Thomas Buchstab
14,766 Points

you need to close your link tag in your html on line four. don't get me wrong, it's self closing but you forgot the >.

in your css, if you want to target the id wrapper you have to use the id selector. in this case it is #wrapper. if you want to get rid of the whitespace above your h1 u have to use the margin-top property and set it to zero. hope that helps

here is the html

<head>
    <title>Header Spacing</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css"
</head>
<body>
    <header>
        <h1>Header Spacing</h1>
        <h2>subheader</h2>
    </header> 
     <div id="wrapper">
    <section>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum finibus ante eget maximus. Vivamus maximus dignissim massa id tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </section>
    </div>
<footer>
    <p>Test | 2016</p>    
</footer>
</body>

here is your css

#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 5%;
}

header{ 
        float: left; 
        margin: 0 0 50px 0; 
        width: 100%; 
}

h1{ 
  margin-top: 0;
  text-align: center; 
  color: #f1f1f1; 
  background: #919191; 
  padding: 20px 0; 
  font-size: 1.7em; 
}

h2 { 
  text-align: center; 
  color: #f1f1f1; 
  background: darkgreen; 
  padding: 15px 0; 
  margin: -22px 0; 
  font-size: 1em }

body{ 
  background: #f1f1f1; }

p { 
  font-size: 0.8em; 
  color: #919191 }

footer{ 
  background: #cacaca; 
  clear: both; 
  text-align: center; 
  color: #fff; 
  padding: 10px 0; 
  max-width: 100%; }
Gabriel Camacho
Gabriel Camacho
2,337 Points
Gabriel Camacho
Gabriel Camacho
2,337 Points

Hi guys.

i manage to fix the margin with the margin-top set to 0. But in another practice i had to use:

body{
    background-color: #f1f1f1;
    display: initial;
}

the display: initial; fix the margin at the top.

Thanks for your help.