'Why does my page header have gaps around it without color?

I was trying to fill the entire <header> with the background color, but the problem is that when I try to view the page, instead of filling the entire <header> with the color, there are white color borders on top, left and right of the <header>. May I know the reason why the background color doesn't fill the whole <header> space entirely?

header {
  background-color: #ECF3F3;
}
<body>
  <header>
    <h1>Food Hunt</h1>
  </header>
  <nav>
  </nav>
  <aside>
  </aside>
  <footer>
  </footer>
</body>
htmlcss


Solution 1:[1]

All HTML document by default have a margin surrounding all four corners of it. So you have to explicitly remove this margin every time you create a new HTML page/template.

The following can help you remove the default margin attached with the HTML pages :

body{
    padding:0;
    margin:0;
}

header{
    background-color:#ECF3F3;
}

And this should remove the unwanted white color.

Demo : http://jsbin.com/OVAnowe/1/

Solution 2:[2]

It does fill the whole header with background colour.

You are seeing the margins or padding for the body or the html elements.

Solution 3:[3]

Add this in ur CSS:

 body {
    height:100%;
    margin:0;
    padding:0
}
h1 {
    margin:0;
    padding:0
}

See the Fiddle:

http://jsfiddle.net/SN3e3/

Solution 4:[4]

By default HTML will apply padding and a margin try this:

header h1{border: 0; margin: 0;}
*{border: 0; margin: 0;}

Any inside of header will now render without a margin or border, the same goes for using * to apply to all elements

http://jsfiddle.net/LXAJg/

Solution 5:[5]

At the top of ur css sheet add

* {
  margin: 0;
  padding: 0;
}

This will reset the pages margin and padding properties to 0, allowing the background color property to fill the .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ANeves
Solution 3 UID
Solution 4 Christopher
Solution 5 Brandon May

Related Questions