CODEWITHSUNDEEP
htmlcssstyling
Christoffer
Christoffer

Reputation: 7777

Getting background color to fill the entire element

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.

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.

Upvotes: 1

Views: 3029

Answers (4)

Guffa
Guffa

Reputation: 700152

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.

Upvotes: 1

Ding
Ding

Reputation: 3085

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

Upvotes: 1

Pete Nicholls
Pete Nicholls

Reputation: 348

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!

Upvotes: 3

fcastillo
fcastillo

Reputation: 948

I think this maybe help you

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

Upvotes: 2

Related Questions