CODEWITHSUNDEEP
htmlcsssass
neo
neo

Reputation: 396

Header 'div' not aligned exactly to the top of screen (Simple but frustrating)

I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like

*{ margin:0;}

why is that so ?

I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.

Linked soultion question.(Please check the comments in correct selected question) Header not touching top of screen

My code :

<html>
  <head>
    <style>

      * {
        margin:0;
      }

      .new {
        width:100%;
        background-color: blue;
      }
    </style>
  </head>
  <body> 
    <div class="new">New Website</div>
  </body>
</html>

Upvotes: 0

Views: 120

Answers (3)

milfred
milfred

Reputation: 21

* is the universal selector. It targets all elements. When you state:

* {margin: 0}

You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.

Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.

Upvotes: 1

weigreen
weigreen

Reputation: 1242

Some browser have set user agent stylesheet at "body" tag

For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.

You can set

body{
    margin: 0;
}

Will solve your problem.

http://jsbin.com/luqoruqewa/edit?html,output

Upvotes: 1

moyeradon
moyeradon

Reputation: 453

Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:

body{
  margin: 0;
}

Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.

Upvotes: 1

Related Questions