Getting background color to fill the entire element

Question

I don't quite understand why this code acts like this. If I do this...

HTML:

<body>
    <header>
        <h1>
            MY HEADER
        </h1>
    </header>

    <article>
        <p>Lorem ipsum dolor sit amet...</p>
    </article>

    <footer>
        <p>This is my footer</p>
    </footer>
</body>

CSS:

body {
    width: 60%;
    margin: 0 auto;
}

article {
    background: #AAA;
}

footer {
    background: #888;
}


header {
    color: #333;
    background: #0F0;
}

I end up with this: enter image description here

But if I add a border to the elements.

CSS:

body {
    width: 60%;
    margin: 20px auto;
}

article {
    border: 1px solid red;
    background: #AAA;
}

footer {
    border: 1px solid red;
    background: #888;
}


header {
    border: 1px solid red;
    color: #333;
    background: #0F0;
}

I end up with this: enter image description here

Why is this?

How do I get the second result without adding borders?

EDIT I finally went with a simple normalization.

{ margin: 0; }

I first wanted to get away from that, since the page I'm building is for showing a group of beginners how to make a simple html/css page. And I think it's hard enough for non-coders to grasp without getting into these weird behaviors.

score 3 · Accepted Answer · answered Jan 28 '15 at 22:43

by default, most HTML elements have some margin applied.

you can remove these from all elements in your CSS with the following line, best placed at the very top.

*{margin:0;}

just be aware this will apply to any paragraphs (or anything else) you add later, it might be better to target the individual elements.

You can also add height or padding to each element to give them a little room, something like this;

<style type="text/css">
*{
    margin:0;
}
    body {
width: 60%;
margin: 0 auto;
}

article {
padding: 3px;
background: #AAA;
}

footer {
  padding: 3px;
background: #888;
}


header {
  padding: 3px;
color: #333;
background: #0F0;
}

good luck!

score 2 · Answer 2 · answered Jan 28 '15 at 22:40

2

I think this maybe help you

h1, p { margin:0; padding: 10px 0; }

answered Jan 28 '15 at 22:40

fcastillo

938
1
11
24

score 1 · Answer 3 · edited May 23 '17 at 12:08

Your <h1>, and <p> tags have inherited styles from the browser's default styles.

There is some quirky behavior due to collapsing margins that you can find around.

Normalize it with something like Eric Meyers CSS reset and then style everything. That will provide a default setting for all browsers that you can build off of and will avoid some of these quirky browser behaviors.

Edit: Others have done things like this:

Margin on child element moves parent element

Guffa · Answer 4 · 2015-01-29T08:17:24.153

The reason for that is margin collapsing. The margin specifies the distance between elements, so when child elements have margin and the parent elements doesn't have anything like border or padding to contain the child element, the parent elements will have the distance between them.

If you add an overflow setting to the parent elements, you can get the same effect without the border:

body {
  width: 60%;
  margin: 0 auto;
}

article {
  background: #AAA;
  overflow: hidden;
}

footer {
  background: #888;
  overflow: hidden;
}


header {
  color: #333;
  background: #0F0;
  overflow: hidden;
}

<header>
  <h1>
    MY HEADER
  </h1>
</header>

<article>
  <p>Lorem ipsum dolor sit amet...</p>
</article>

<footer>
  <p>This is my footer</p>
</footer>

Another alternative would be to set all margins to zero for the child elements, and use padding instead.

Getting background color to fill the entire element

4 Answers4