Removing space at the top left and right of div

Question

I am starting to work with css and have basic issue.

I have a div element:

.top {
  background-color: #3B5998;
  margin-left: 0px;
  margin-top: 0px
}

<div class="top">...</div>

The colour code is taking effect (good).

The problem I have is that there seems to be a bit of white space on left, top and right of the div. How do I get rid of the white space? For example if you take a look at Facebook page, the top part is completely blue, there is no white space at the top.

Answer 1

You need to reset both the default padding and margin attributes in your stylesheet:

html, body {
    margin: 0;
    padding: 0;
}

As @Jason McCreary mentions, you should also look into using a reset stylesheet. The one he links to, Eric Meyer's CSS reset, is a great place to start.

It also looks like you're missing a semi-colon in your css, it should look as follows:

.top
{
    background-color:#3B5998;
    margin-left:0px;
    margin-top:0px;
}