To finish this section, let's learn some shorthand. A few declarations can be collapsed into just one declaration. Instead of individually setting
border-style: [style]
border-width: [width]
border-color: [color]
you can combine all three values into one border
property. Just put a space after each value.
border: [style] [width] [color];
You can do something similar with the top, right, bottom and left declarations for margin
and padding
:
padding: [top] [right] [bottom] [left];
Notice that it starts at the top, like the hour-hand at noon, and goes clockwise all the way around. If you want all sides to be the same, you can shorten it even more:
margin: [all-four!]
If the horizontal sides are the same (left and right) and the vertical sides are the same (top and bottom), you can use this format:
margin: [vertical] [horizontal]