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

HTML

David Kim
David Kim
943 Points
Posted by David Kim
David Kim
943 Points

Margin...??

So I learned that margin is the outside of a box right? and padding is the inside.

<body>

<header>
  <nav>
    <h1>My Page</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Links</a></li>
    </ul>
  </nav>
</header>

</body>

------------------------------ CSS File body { margin: 0; }

header { background-color: #0e126e; color:#ffffff; }

header h1 { margin:0; }

nav ul { margin:0;

}

since margin is the outside of the box, if you give header h1 a margin of 0, wouldn't the space surrounding header h1 be zero? But if I apply margin: 0 for header h1, only the top part is removed, not the whole area surrounding "My Page" (header h1). Thanks, your help will be appreciated.

1 Answer

Davis Norde
Davis Norde
27,592 Points
Davis Norde
Davis Norde
27,592 Points

Hi, David! In case of <h1>, you have to consider that it is a block level element, meaning that it always takes full width on the page. I hope this helps.