Abusing Margins

Something that has come up time and time again, and then again a few times this week, has been the use and abuse of margins and padding in CSS based layouts. I thought I’d quickly point out 3 cases where margins and padding can be used to ones advantage – column based layouts, vertical centering & a workaround for poor support for min-height.

The first use is the most common, but should be reiterated. There are a variety of ways to create a multiple column layout in CSS but the one most common is to create a gutter around the main content area using large left or right margins and the position the 2nd column into that margin via float or other method. That method is how this site is currently laid out.

Vertical alignment of content is something that always baffles designers – myself included. There is no one good way to center things, and in some cases it just can’t be done with styles alone, but sometimes it can be done. Some time ago I mocked up this demo that shows how to vertically align a block of content when you know its height (but not its container’s height). The first step is to position the element at the half way (50%) mark of its container. At that point it is below center, but you have found where center is. After that you can shift the content back up over that 50% mark using a negative value for margin-top that is half the content height in pixels. The linked example has a known height of 100px so it would be assigned a margin-top of 50px. You can play with the numbers to create different effects.

The last abuse of margins and padding I will mention is the use of large padding-top values in containers to assume the role of the min-height property that isn’t well supported at this time. By balancing a large padding-top on a container and an equal negative margin-top on its contents you have negated any shifting of content. Sounds pointless on the surface, but what you have done is forced the containing block to be at least as large as the padding inside it. Its hard to visualize at first, but you’re in luck as Dave Shea does a fabulous job outlining this method in his post min-height: fixed;.