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
James Casavant
21,522 PointsWhat 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
29,679 PointsA 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 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).
James Maddox
17,154 PointsHere'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.
James Casavant
21,522 PointsHi James,
Thanks for the illustration, however if margins auto-collapse I wouldn't want them protecting my Porsche from some wayward Suburu.
Colin Bell
29,679 PointsAuto 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.
James Casavant
21,522 PointsGreat Colin, thank you!
James Casavant
21,522 PointsJames Casavant
21,522 PointsThanks, 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?