Spring Into HTML and CSS

Margin Shorthand

Margin properties have a shorthand counterpart using the margin property. You'll have noticed that CSS shorthand properties tend to have quirks of their own, such as the order of values. Margins are no exception to this.

Using the margin property, you set up the values for your margins in this exact order: top, right, bottom, left. The popular mnemonic for this in the industry is “TRouBLe.” In Example 11-3, I'd set all the longhand properties for the body:

body {margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px;}

Although longhand doesn't require the specified margin order, I thought it would be helpful for you to see how this translates to shorthand:

body {margin: 30px 30px 30px 130px;}

You'll ...