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!

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 How to Make a Website Customizing Colors and Fonts Resize Text

Matthias Nörr
Matthias Nörr
8,614 Points

Why 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
Jennifer Nordell
Treehouse Teacher

Obviously, 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! :sparkles:

Matthias Nörr
Matthias Nörr
8,614 Points

Thanks. I use normalize.css. My browser is firefox.

Hi 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.