neo neo - 6 months ago 12
CSS Question

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>

Answer

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

Comments