When you specify margins for an element in your CSS, it might look like this…
#myDiv {
margin-top: 10px;
margin-right: 12px;
margin-bottom: 3px;
margin-left: 8px;
}
Where each item above is pretty self explanatory. As you may already know, the order & format of the list above is totally arbitrary. It’s the same as this…
#myDiv {
margin-bottom: 3px; margin-top: 10px;
margin-left: 8px; margin-right: 12px; }
If you’re interested in making your code more compact, simply use the “shorthand” by writing “margin:” and following it with the specified margins in this exact order…
TOP
RIGHT
BOTTOM
LEFT
like this…
#myDiv { margin: 10px 12px 3px 8px; }
or…
#myDiv {
margin: 10px 12px 3px 8px;
}
Specifying margins using CSS shorthand is explained in exact detail here at the W3 Schools website. However upon your first reading it may not seem clear how you could possibly remember the shorthand rules.
I’m going to attempt to break it down, hopefully making it easier:
Follow these two very simple “rules of thumb”:
1. Always start at the TOP side of the element.
2. Always move Clockwise around the element’s sides.
…top, right, bottom, & left
Got it?
But what if some or all of your margins are equal to each other- can you compact the shorthand even further?
Yes, you can. (Don’t forget the Rules of Thumb above)
Case #1. If left & right margins are the same:
TOP (10 pixels)
RIGHT & LEFT (12 pixels each)
BOTTOM (8 pixels)
#myDiv { margin: 10px 12px 8px; }
To remember this, apply the rules of thumb (start at top and move clockwise) but stop after the third side. Top, Right (same as Left), Bottom, stop.
Case #2. If top & bottom margins are the same AND right & left margins are the same:
TOP & BOTTOM (10 pixels each)
RIGHT & LEFT (12 pixels each)
#myDiv { margin: 10px 12px; }
To remember this, apply the rules of thumb (start at top and move clockwise) but stop after the second side. Top (same as Bottom), Right (same as Left), stop.
Case #3. If all four margins are the same:
TOP, RIGHT, BOTTOM, & LEFT (10 pixels each)
#myDiv { margin: 10px; }
To remember this is obvious; one number specifies all four sides… or simply following the rules of thumb (start at top and move clockwise) but stop after the first side. Top (same as Right, Bottom & Left), stop.
And to remove all default margins,
#myDiv { margin: 0; }
Case #4. If top & bottom margins are the same:
Unlike, Case #1 above, there is no special shorthand for this.
Other Examples:
All of the above examples assume you are specifying all four sides. What if one or more are zero?
TOP (no margin), RIGHT (12 pixels), BOTTOM (no margin), LEFT (12 pixels):
#myDiv { margin: 0 12px; }
TOP (no margin), RIGHT (12 pixels), BOTTOM (no margin), LEFT (no margin):
#myDiv { margin: 0 12px 0 0; }
alternatively,
#myDiv { margin-right: 12px; }
(however, without specifying a zero margin for the other three sides, any default margins will apply)
TOP (12 pixels), RIGHT (12 pixels), BOTTOM (no margin), LEFT (no margin):
#myDiv { margin: 12px 12px 0 0; }
TOP (no margin), RIGHT (12 pixels), BOTTOM (no margin), LEFT (14 pixels):
(note that even though TOP & BOTTOM are the same, they cannot be combined in this case because RIGHT & LEFT are different from each other)
#myDiv { margin: 0 12px 0 14px; }
Notes: Zero can be written as simply "0" without the units on the end. I prefer to leave the units off because in this case, they are simply ignored. As per the W3C, “The format of a length value (denoted by in this specification) is a (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.”
Reference: http://www.w3.org