Fill the entire
background with color

Question

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>

header {
  background-color: #ECF3F3;
}

<body>
  <header>
    <h1>Food Hunt</h1>
  </header>
  <nav>
  </nav>
  <aside>
  </aside>
  <footer>
  </footer>
</body>

Dan Grahn · Accepted Answer

This can be caused by the margin/padding on the body or html elements, but it can also be caused by the margin on your h1 element.

See this jsFiddle.

header {
    background-color: pink;
}

header h1 {
    margin: 0;
}

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

<header>
    <h1>Title</h1>
</header>

Roy M J · Answer

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/

Fill the entire <header> background with color

Tags:

html

css

caramel1995

2 Answers

Dan Grahn

Roy M J

Recent Activity

Donate For Us