A Clockwork Box

David — Tue, 02 Mar 2010 23:22:59 +0000

With CSS there are always various ways to accomplish something. After reading this short tidbit, you should be familiar with the various ways of controlling the size of an element’s padding, border, and margin, and you should know what the handy “clockwork” tip is, and how it will be useful to remember when you’re putting your CSS into practice.

Equal values on all four sides

If all four values (top, right, bottom, and left) are equal, then you simply write the following:

padding: 1px;
border-width: 1px;
margin: 1px;

The longhand way

If you don’t want equal values on all four sides, then you can specify each side individually:

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

The shortcut (like clockwork)

However this seems to be quite a hassle typing out each property, so you’ll find it’s much easier to use the following shorthand, which is in this order: top, right, bottom, left (think of the hands going clockwise around a clock). The following is equivalent to the above code:

padding: 1px 2px 3px 4px;
border-width: 1px 2px 3px 4px;
margin: 1px 2px 3px 4px;

Other shorthands

This is the style I find myself writing in most often, but there are two other shorthand styles you should be aware of:

padding: 1px 2px 3px;  /* top, left/right, bottom */
padding: 1px 2px;      /* top/bottom, left/right */

Summary

In short, there are various ways to define the padding, border, and margin on an element. Here’s a recap, with padding used as an example: