Welcome to the Treehouse Community
Looking to learn something new?
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.
Colin Bell29,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 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).
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.
Thanks for the illustration, however if margins auto-collapse I wouldn't want them protecting my Porsche from some wayward Suburu.
Great Colin, thank you!