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
Matthias Nörr
8,614 PointsWhy does padding have a greater effect on my element than margin?
If I set a padding of 10px to my navigation-element like this
nav {
text-align: center;
padding: 10px 0;
}
why does the room around the navigation change to 30px?
In previous answers you posted links to the css-box-model. I understand the concept and know the difference between padding and margin. Still, my question remains.
2 Answers
Jennifer Nordell
Treehouse TeacherObviously, I can't see what browser you're looking at this in. Different browsers have different default CSS styles. Are you using normalize.css? It's possible that the extra 20 pixels has to do with a built-in CSS of the browser that you're using. The best thing you can do is inspect the element in the developer tools and use that to figure out where the extra pixels are coming from. Hope this helps!
Jason Anello
Courses Plus Student 94,610 PointsHi Matthias,
You're probably experiencing vertical margin collapsing.
Whenever vertical margins are touching they will join together as a single margin and the value of that margin will be the larger of the 2 values. There needs to be border, padding or content to separate the margins in order to prevent the collapsing. This doesn't apply to floated or absolutely positioned elements.
In this case, before the padding is added, there is nothing to separate the top margin of the nav and the top margin of the ul within it and so they join together to form a single margin at the top of the nav element.
The nav doesn't yet have a top margin but the ul has a 1em (16px by default) top margin set by normalize.css. So rather than this margin pushing the ul down from the top of the nav, it joins with the nav margin and pushes the nav as a whole down from the logo.
When the padding is added, this separates the 2 margins and now they act independently of each other. You're seeing the ul go down by 10px because of the padding and then an additional 16px because of it's top margin which now begins from that padding, for a total of 26px.
Here's a video from CSS layout basics that covers this issue Why Vertical Margins Collapse
Also, the Teacher's Notes has a link to an MDN page if you'd like to read more about it.
Matthias Nörr
8,614 PointsMatthias Nörr
8,614 PointsThanks. I use normalize.css. My browser is firefox.