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

Posted by Isaac Asante
Isaac Asante
4,752 Points

How do I remove the top margin from my website?

Hey everyone,

I'm building my own website now, and I'm using the normalize.css style sheet to avoid browser issues, and also a custom style sheet, in which I've declared the following:

body {
margin: 0;
padding: 0;
}

But when I preview the site in all my browsers on my local server, there is always a white space at the top of my website. When I inspect my source code in my browsers, I see it's the body tag itself that's pushed down. I've even tried applying that rule to the main html tag, but it doesn't work.

In my HTML document, I've referenced normalize.css before my custom style sheet.

Can you assist here?

Thanks!!

EDIT: Below's my full HTML for now (inspired from the Treehouse Portolio Website)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Isaac Asante | Treehouse Student</title>
    <link rel="stylesheet" href="/css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Isaac Asante</h1>
        <h2>Treehouse Student</h2>
      </a>
      <nav>
        <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>


      </section>
      <footer>
        <a href="http://twitter.com/isaacasante"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/ikeisaacasante"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Isaac Asante.</p>
      </footer>
    </div>
  </body>
</html>

3 Answers

Kris Phelps
Kris Phelps
7,609 Points

It's your h1's margin pushing everything down. Add this to main.css

h1 { margin: 0; }

Isaac Asante
Isaac Asante
4,752 Points

Super thanks! It worked!!

Kris Phelps
Kris Phelps
7,609 Points

Good! I'm glad I could help :-)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

I wonder if Kris was able to look at the Chrome Console for inspecting element. This is excellent for spotting elements that push their own margins into your document.

You can also get around this by having something is simple as a 

* {
   margin: 0;
  padding: 0;
}

in your CSS. Glad you were sorted with this, :)

Kris Phelps
Kris Phelps
7,609 Points

Indeed I did. I built his site in a WorkSpace, and used the console in Firefox. The Box Model tab shows exactly what's going on. I'd have used Chrome if it were on this computer :-).

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hello there,

The only reason I can think of that this isn't working is that there is a stray style rule somewhere with higher specificity that's taking control of your margin styles.

Is there a duplicate style in your custom stylesheet that's causing your body tag to push down?

Make sure there's no other margin declarations anywhere else that has higher specificity than your body rules.

Hope this helps.

Isaac Asante
Isaac Asante
4,752 Points

I checked this too, but at the moment, all the CSS there is apart from an unmodified normalize.css file is my custom style sheet, which I just created, so it only contains the following (in full):

body {
    margin: 0 0;
}

header {
    margin: 0;
    width:  100%;
    height: 50px;
    background: #000;
}
Kris Phelps
Kris Phelps
7,609 Points
Kris Phelps
Kris Phelps
7,609 Points

Post your HTML and I'll be happy to take a look. :-)

Isaac Asante
Isaac Asante
4,752 Points

Sure, I've posted my HTML in my question now. Please take a look :)