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
Kai-Ting Lin
5,712 Pointsh3 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Keith Kelly
21,326 PointsYou 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
9,321 Pointswhen adding padding to a element it goes clockwise from the top so {top,right,bottom,left}
Kai-Ting Lin
5,712 PointsYes I get it, it makes sense to me now. Thanks a lot!! :-)
Kai-Ting Lin
5,712 PointsHi 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! :-)
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsPerhaps NIck knows that for future uses of the
h3he'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 betweenh3's and paragraphs for example.