Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Style New Pages

Kai-Ting Lin
Kai-Ting Lin
5,712 Points

h3 element

I don't understand what it means to make sure the h3 element of "About" will be "separated" by adding { 0 0 1em 0} . Since it looks only slightly different. Can anyone enlighten me on that? Thanks a lot!

5 Answers

Hi Kai-Ting,

I don't believe there was any change at all. I think it may have looked that way in the video because of the slight movement that happens when Nick refreshes.

The h3 had a top and bottom margin of 1em already applied from normalize.css. This works out to 18px for the h3 based on its font size.

So when margin: 0 0 1em 0; is added in main.css, all that's really happening is the top margin that normalize.css applied is being removed. But the bottom margin remains the same at 1em.

So there should be no change with the spacing below the h3. We don't see any change either with the spacing above because the profile image had 30px of bottom margin and because of vertical margin collapsing the 18px of top margin the h3 had was collapsed into the 30px of bottom margin the image has. So removing it causes no change in this particular situation because it was already collapsed.

Perhaps NIck knows that for future uses of the h3 he's not going to want that top margin and he's simply being explicit about keeping that bottom margin to make sure you have space between h3's and paragraphs for example.

Keith Kelly
Keith Kelly
21,326 Points

You were probably only seeing a slight change in the separation after the h3 because there are already default margin values assigned to header elements through the browser defaults. So Nick applied a slightly larger bottom padding to ensure there is the spacing he wants after the h3 element.

Brandan Booth
Brandan Booth
8,846 Points

when adding padding to a element it goes clockwise from the top so {top,right,bottom,left}

Kai-Ting Lin
Kai-Ting Lin
5,712 Points

Yes I get it, it makes sense to me now. Thanks a lot!! :-)

Kai-Ting Lin
Kai-Ting Lin
5,712 Points

Hi Jason:

Thanks a lot for the very detailed answer! Especially "The h3 had a top and bottom margin of 1 em already applied from normalize.css" which I didn't notice. All this made it clear for me why Nick did so to remove what had been applied in normalize.css and to be explicit.

Thank you! :-)

You're welcome!