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.

CSS How to Make a Website Adding Pages to a Website Add Iconography

What is the reasoning of setting the bottom margin of 10px instead of setting the bottom padding at 10px?

In the Iconography segment of the Web-Design track Nick sets the margin below the contact links to be 10px after setting the bottom padding to 0.

My question is: what is the difference between setting the bottom margin at 10px and the bottom padding at 10px in this example? Actually, some more specific examples of the differences between the margin and padding properties would be helpful in gaining a better understanding of when to use each - often in the examples a padding and margin statement with specific measurements will be made without clearly indicating why the choices were made to associate these measurements with either padding or margin.

It was mentioned earlier that margin wasn't used at times because it can lead to collisions, this is somewhat vague and would benefit from some clarification. It may be forthcoming, but it seems relevant at this point in the course.

4 Answers

Colin Bell
Colin Bell
29,679 Points

A big difference is that margin auto-collapse, while padding doesn't.

Padding is essentially pushing out from inside. Margin is pushing out from the outside.

Padding extends the element's size while margin pushes surrounding elements away from an element. Padding is included in an element's click area while margin is not.

padding vs margin

Padding takes on an elements background color, the border is set around the edge of the padding, etc. Margin pushes other elements away from the outer edge of itself (including padding).

Thanks, Colin. I understand what you've shared about the padding increasing the size of an element and a margin pushing away from an element, and it's helpful, but what does it mean that a margin auto-collapses? It doesn't seem to follow that just because the "push" is pushing from the outer-boundaries of an object that it needs must be collapsible.

Also, it is still not extremely clear to me still why - in the example mentioned - margin was chosen. Could not the same effect have been produced by padding? Was it chosen "just because" or is there a more particular reason?

Here's how it works in simple terms. If you have a car and you don't want other cars Parked too close to you, you would use a margin because margins work for the outside of the object.

Now, if you are inside of the car and need more headroom, leg room, etc... you would use padding because it works for creating room on the inside of the object.

Therefore, he used a margin because he wanted to position the whole element not just the stuff on the inside. Hope this makes more sense.

Hi James,

Thanks for the illustration, however if margins auto-collapse I wouldn't want them protecting my Porsche from some wayward Suburu.

Colin Bell
Colin Bell
29,679 Points

Auto collapse is saying that if the element on top has a bottom-margin of 10px and the element on bottom has a top-margin of 10px, the total margin between the two will be 10px (Not 20px as one might expect), but your Porsche will always be at least 10px away from the wayward Subaru.

Another example: If the top element had a bottom-margin of 20px and the bottom element had a top-margin of 5px, the margin between the two elements would be 20px (Not 25px), but your Porsche will always be at least 20px away from the wayward Subaru.

Hopefully this helps. If not, I can make an image better explaining it when I get to a computer instead of my phone.

Great Colin, thank you!