I'm not sure exactly how to phrase this, so please bear with me. Both padding and margins can be used to position block element content. They seem to be interchangeable when it comes to placing gutters. Is there a standard/convention/rule of thumb for using one (padding or margins) instead of the other? Are there any cross-browser considerations to be aware of, even if using a reset?
1 answer
point
Not sure if this is a complete answer, but I've always avoided horizontal padding and used margins on the elements inside the box - mostly as IE's old box model messed up widths if you used horizontal padding.
I generally use vertical padding instead of margins due to the margin-collapse phenomenon, where margins can stick out of the top of a containing element.
You'd have to do your own experimenting for your own individual situation, but the rule of thumb of horizontal margins and vertical padding generally works for me.
useful link: http://complexspiral.com/publications/uncollapsing-margins/
- I really hate that margin-collapse thing. +1
