Monday, October 4, 2010

Css Tutorial : Margin Shortcuts

A couple of easy shortcuts are available to reduce up to four margin:value declarations into one.
/* Basic container */
#container {
margin: 20px auto 1em auto;
}
The order of the values is very important here. The order is top (20px), right (auto), bottom
(1em), and right (auto). It helps to get used to the order by thinking of it like a compass—north,
east, south, and west, the first value always being north, or like a clock—12 o’clock, 3 o’clock,
6 o’clock, and 9 o’clock, the first value being 12 o’clock.
If all four values are the same, the declaration can be shortened even further:

/* Basic container */
#container {
margin: 20px;
}
These shortcuts will also work for padding and some other properties, which you’ll find out
more about later.

No comments:

Post a Comment