Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Yuval Blass
Yuval Blass
18,134 Points

background color

Hi everyone, I don't understand something with the margin property of a background color. Here it's my working code and the non-working code, why the seconde one doesn't work?

working code: 

body {
  margin: 0;
}

header {
  background-color:  orange;
  padding-top: 120px;
  padding-bottom: 90px;
  margin-bottom: 50px;
  text-align: center;
}

There some margin at the sides of the box (background) with this code, why?

header {
  margin: 0;
  background-color:  orange;
  padding-top: 120px;
  padding-bottom: 90px;
  margin-bottom: 50px;
  text-align: center;
}

And the html code:

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <span>Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <p>
      Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
    </p>
    <a href="#">Find out more</a>
  </body>
</html>

2 Answers

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Hi Yuval,

Basically, browsers have some default styles applied to them which later you will learn that you can override using something like reset.css or normalize.css

In your working code you set the body of the HTML document to have zero margins, therefore you see no white space. In your non-working code, you set the margins of the header to 0 and body default styles remain.

Check out this illustration.

Hope this helps! ?

Yuval Blass
Yuval Blass
18,134 Points
Yuval Blass
Yuval Blass
18,134 Points

Wow! Thank you, Michae! Twice a day! So basically if I add a normalize.css file, my non-working code will still be a non-working code? Because the normalize.css have also reset the margin to something? Or the normalize.css reset the margin to 0? And one more thing, I also know how to speak Hebrew. ?

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Yes, normalise will already include body margins set to zero so your non-working code will work. Although it may seem cryptic right now, check out the styles that are applied to normalise.css here.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

You are welcome Yuval, and shalom! ?

If you feel like you can't express yourself in English and you need some assistance in Hebrew feel free to visit my profile and shoot me an email.

But on the forums we'll keep it English so all students can benefit as well. ?