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 CSS Basics (2014) Basic Selectors Type Selectors

King Mic'z
King Mic'z
797 Points
Posted by King Mic'z
King Mic'z
797 Points

Top Margin!

Hi,

I set the body margin to 0 in my stylesheet but the white spaces at the top don't disappear.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="widthdevice-width"> <meta name="author" content="King Micutuan"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>My First Coding Project</title> </head> <body> <div class="container"><!-- Start Div Wrapper --> <header>
<nav> <ul> <li><a href="/index.html">Home</a></li> <li><a href="/About.html">About</a></li> <li><a href="/Contact.html">Contact</a></li> <li><a href="/Articles.html">Articles</a></li> <li><a href="/Login.html">Login</a></li> </ul> </nav> </header> </div><!-- End Div Wrapper --> </body> </html>

4 Answers

Andrew Hinkson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Hinkson
Full Stack JavaScript Techdegree Graduate 25,822 Points
Andrew Hinkson
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Hinkson
Full Stack JavaScript Techdegree Graduate 25,822 Points

You have the right idea about the body margin but also your unordered list also has a top margin. If you want your nav to be all the way pushed to the top I would also add:

ul {margin-top: 0};

That should give you the 0 margin at the top of your document.

Hope this helps.

King Mic'z
King Mic'z
797 Points
King Mic'z
King Mic'z
797 Points

Hi Andrew,

Thank you for your help.

I added your code and it only reduce the white space.

What else it could be stopping from it to push all the way to the top?

Andrew Hinkson
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Hinkson
Full Stack JavaScript Techdegree Graduate 25,822 Points

Im not sure to be honest. In the workspace I have this as my css:

body {margin-top: 0;}
ul {margin-top: 0;}

With just this the list is pushed all the way to the top. I may be confused at what your talking about though. Sorry I couldn't help more.

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

Try reducing the padding as well. The margin is the outermost layer in the box model, and physically separates one from the the other. The padding on the other hand separates the content of an element from the inside of the border of an element which gives the appearance of movement from a margin. If you remove all padding and margin from an element you should then find your element at the edge of either he root or it's containing element. :-)

Kristaps Vecvagars
Kristaps Vecvagars
6,193 Points
Kristaps Vecvagars
Kristaps Vecvagars
6,193 Points

In these kind of situations I would strongly advise to use the "inspect" browser tool to determine the correct source of the whitespace in question. Most of the time the source will probably be some sort of default padding or margin, but there are other possibilities, for example, pre-defined container size.

Cody Dreese
Cody Dreese
849 Points
Cody Dreese
Cody Dreese
849 Points

I had the exact same problem as well.

You said you tried setting the ul's margin-top to 0? Try setting the nav elements margin-top to 0.

SOLUTION :

  1. Right-click "inspect" element.
  2. Slide cursor over each element to identify which one has default padding that's touching the top margin.
  3. Give that element a margin-top property and set the value to "0".

NOTE : The other comments have also said the same thing, and I'm just combining their help into a single comment.