White Margin with body, header and html set at 0

Question

i want to get rid of the white margin around my website . I have set on #body #header and #html margin:0; and padding:0; Can someone please help

Here is the HTML code:

<DOCTYPE html>
<html>
<header> 
<link href="CSS/stylesheet.css" rel=stylesheet>
</header>   
<body>
<div id="bannertop"></div>

</body>
</html>

And the CSS:

#html{
    margin: 0 !important;
    padding: 0 !important;
}
#header{
    margin: 0 !important;
    padding: 0 !important;
}
#body{
    margin: 0 !important;
    padding: 0 !important;
}
#bannertop{
   height: 200px;
   width: 100%;
   background-color: cadetblue;
   margin-top:0px;

}

Here is a picure of the website Website

score 1 · Answer 1 · answered Nov 20 '16 at 19:49

You need to remove the # from html,body and header because # use for ID and . for class difference between ID & Class

html,body{
    margin: 0 !important;
    padding: 0 !important;
}
header{
    margin: 0 !important;
    padding: 0 !important;
}

#bannertop{
   height: 200px;
   width: 100%;
   background-color: cadetblue;
   margin-top:0px;

}

score 0 · Answer 2 · answered Nov 20 '16 at 19:53

Welcome to StackOverflow!

You are not referencing some of your elements correctly. The # selector (in front of html, body and header in your CSS) target elements with id attributes set the the value after the #.

Due to your HTML elements you are attempting to reference not having IDs your CSS has not targeted the elements correctly.

To fix it you must remove the # in front of html and body. You can also write this more concisely by using multiple selectors:

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

FYI you have a minor mistake using header instead of head.

If you're currently learning HTML and CSS I recommend the following resources:

score 0 · Answer 3 · answered Nov 20 '16 at 19:56

remove # before the body and html

html{
    margin: 0 !important;
    padding: 0 !important;
}
#header{
    margin: 0 !important;
    padding: 0 !important;
}
body{
    margin: 0 !important;
    padding: 0 !important;
}
#bannertop{
   height: 200px;
   width: 100%;
   background-color: cadetblue;
   margin-top:0px;

}

<DOCTYPE html>
<html>
<header> 
<link href="CSS/stylesheet.css" rel=stylesheet>
</header>   
<body>
<div id="bannertop"></div>

</body>
</html>

score -2 · Answer 4 · answered Nov 20 '16 at 19:47

-2

try this:

* {
    margin: 0;
}

it should set all the margin to 0 on every element. you can just overide it by keeping it at the start of your css and adding diferent margins to other elements

answered Nov 20 '16 at 19:47

Grey

877
9
29

White Margin with body, header and html set at 0

4 Answers4