CSS Shorthand Properties

By Trenton Moss
2008-01-26


CSS margin and padding

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

Four different values

Use:

margin: 2px 1px 3px 4px (top, right, bottom, left)

...instead of

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

Three different values

Use:

margin: 5em 1em 3em (top, right and left, bottom)

...instead of

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values

Use:

margin: 5% 1% (top and bottom, right and left)

...instead of

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value

Use:

margin: 0 (top, bottom, right and left)

...instead of

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

The above rules also apply to padding and border (see below for more on border).

Tutorial Pages:
» CSS fonts
» CSS background and lists
» CSS margin and padding
» CSS borders
» Conclusion

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS » Cascading Style Sheets - CSS