There are two ways in CSS to create space around your elements: margins and padding. In most usage scenarios, they are functionally identical – for example, if you add 20 pixels of either margin or padding to the left side of an element, that element will generally move 20 pixels to the right on the screen. But in truth, they do behave in slightly different ways. So when should you use margins, and when would padding be more appropriate?
Use margins when:
- You want your spacing to appear outside of the “box” created by a border property. Margins lie outside of borders, so you’d use them if you want your border to stay in one place. This can be useful if you have, for example, a sidebar with a border that you want to move away from your main content area.
- You don’t want your background color or image to invade your personal space. Background colors and images stop at the border, so if you’d rather keep your backgrounds out of the space you’re making, margins are the property you want.
- You’d like collapsible space on the top and bottom of your element. Top and bottom margins behave differently than side margins in that if two margins are atop one another, they collapse to the size of the largest margin set. For example, if I set paragraph to have a top margin of 20 pixels and a bottom margin of 15 pixels, I’ll only have 20 pixels of space total between paragraphs (the two margins collapse into one another, and the largest wins out).
Padding, on the other hand, behaves very differently in these scenarios. Thus, you’d want to use padding when:
- You want all of the space you’re creating to be inside your border. Padding is contained within your borders, so it’s useful for pushing your borders away from the content inside of your element.
- You need your background color/image to continue on into the space you’re creating. Your background will continue on behind your padding, so only use it if you want your background to peek out.
- You want your top and bottom space to behave more rigidly. For example, if you set the paragraphs in your document to have a top padding of 20 pixels and a bottom padding of 15 pixels, then any time you had two paragraphs in a row, they’d actually have a total of 35 pixels of space between them.
So as you can see, there are important differences between margins and padding that you should take into consideration when choosing which to use to move elements around the page. However, in those cases where either margins or padding could be used to the same effect, a lot of the decision comes down to personal preference.
For example, I tend to use margins almost exclusively when I’m trying to create space between two elements. In my mind, margins are used for creating space between elements, while padding is used for creating space within elements. Therefore, I use margins to move disparate elements apart, and padding to create a little breathing room within the elements themselves.
However, a case could also be made for using padding for effecting space between elements. From time to time, Internet Explorer 6 will have trouble with margins – there’s something out there known as the doubled-margin float bug that can wreak all sorts of havoc with pages laid out with margins when they’re loaded in our favorite “special” browser. Using padding almost exclusively does create a way around this problem. I personally tend to just use a CSS hack or two to make IE behave itself when we’re in public, but as I said, this can be an effective argument for ubiquitous padding.