Margin and Padding
These are by far the easiest. Just think about the hands of a clock starting at noon, and follow the hour. For the sake of brevity, we’ll be working with margin (since it’s a shorter word). So for all cases of margin, the same rules apply to padding.
margin properties.
element {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}
… combined into the margin superpowers:
the margin shorthand property
/* top right bottom left */
element {
margin: auto auto auto auto;
}
Of course, you may declare your margin with one, two, three, or four values. Here is how each scenario will be played out:
margin fun
/* adds a 10px margin to all four sides */
element {
margin:10px;
}
/* adds a 20px margin to top and bottom and a 5px margin to left and right */
element {
margin:20px 5px;
}
/* adds a 50px margin to top and a 10px margin to left and right and a 300px margin to bottom */
element {
margin:50px 10px 300px;
}
