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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Clarification needed on removing the problematic h1 margin

In the video, Nick says that adding the "margin" property to the header element will remove the problematic top-margin caused by the h1 element.

However, I used Chrome's inspect element, and after toggling all the css changes we've made to header OFF I enabled them one by one, curious as to how the css changes we've made are affecting the header and its contents.

Anyway, toggling the "margin" property on and off doesn't solve the problem - its toggling the "padding" property on / off that solves the spacing issue. That is, we didn't need to set a top-margin of 0 in order to fix the spacing problem. This is opposite to what Nick says.

Did Nick just confuse the two by mistake, or am I missing something here?

1 Answer

In the video Nick is not using a top margin on his header, but he is using a top padding value.

Since I skimmed the video I did not notice if he said that a top margin is needed, but if he did, it would have been a mistake.

And to be clear, yes, top padding is the usual way to ensure a child element's top margin does not extend outside of its parent element's borders.