One of the most common attributes in CSS are margin and padding, while there use isn't that big it certainly helps a website's content look clean and spaced out. Margins create certain amounts of spacing between almost anything on a webpage and can be used to seperate divs. Padding of course is most commonly used to space out divs, paragraphs and general content so everything isn't jumbled up and wrap up within each other so it is clear to the reader. Like many CSS attributes margin and padding have shorthand versions of themselves. In this CSS tricks and tips tutorials you'll learn how you can save time by using shorthand with your margins and padding.

Dissecting the Margin and Padding Attributes

It's important to start off by understanding the actual margin and padding in it's non shorthand form, besides the difference in what a margin and padding attribute does, it is written in CSS exactly the same as each other, so we won't have to remember to different shorthand methods, they both can be applied to either attribute, and who said CSS was hard?! We'll start off by representing both attributes in the non shorthand form:

/* Margin Non shorthand */
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

/* Padding Non shorthand */
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

This is the non shorthand form for both margin and padding. This code assumes that a 10px margin and padding needs to be set on all 4 sides, we can shorten down the code if you wanted the same size of margin and padding set on all sides to simply just:

/* Margin Shorthand (If all sides are equal) */
margin:10px;

/* Padding Shorthand (If all sides are equal)  */
padding:10px;

This is a very convenient shorthand method if the margin and padding is going to be equal on all sides, but if it won't be then you can't use this shorthand method. Don't worry though! There are plenty more coming up!

What if my margins and padding aren't equal on all sides?

Don't worry your not left out! We can use shorthand for unequal margin and padding amounts to. Going back to the non shorthand code that is featured at the beginning of this tutorial, have you noticed the order that the margin and padding are defined? Thats not just me being organised, infact margins and padding are defined in that order when writing them in CSS. So if we remember the order of top, right, bottom, left then we can move onto the new shorthand method.

/* Margin Shorthand (If sides are equal or not) */
margin:10px 15px 7px 20px;

/* Remember: Top Margin = 10px  Right Margin = 15px  Bottom Margin = 7px  Left Margin = 20px */

/* Padding Shorthand (If sides are equal or not)  */
padding:5px 7px 5px 7px;

/* Remember: Top Padding = 5px  Right Padding = 7px  Bottom Padding = 5px  Left Padding = 7px */

So now we can use unequal values in a shorthand form. Generally this is the standard way to write margins and padding in CSS. While any of the methods shown in this tutorial do exactly the same, I'd suggest getting used to using this shorthand method.

Personal note from myself

When applying a singular margin or padding value, I tend to just apply the singular version of the margin or padding e.g. margin-left:30px;. So people may disagree with me, but if you are applying one singular value on just one side then is there really any point writing margin:0px 0px 0px 30px;? I mean by writing just margin-left:30px; this automatically interprets as a 30px value margin needs to be applied to the left side, but no other sides needs values so leave at 0. So really your redefining something that CSS already knows. It's up to you, but thats my usage of it.

Even more Shorthand

Were still not done yet! We can shorten the CSS even more by only defining certain margins and padding values, which will automatically equally define margins and padding. For example, you could add only three values to the margin and padding and the missing value will be placed automatically. Here's some examples:

/* Margin Shorthand (Left margin isn't included but still is 50px) */
margin:25px 50px 75px;

/* Padding Shorthand (Left padding isn't included but still is 50px) */
padding:25px 50px 75px;

In this example the left margin and padding is missing from the code, but because this is a short hand method the left margin and padding value is 50px. You see if we look at this way. Top and Bottom are the opposites of each other, so would it make sense for the left and right to also work on this basis, and indeed it does. If the top value was defined, but the bototm wasn't CSS would apply whatever the top value was because they are exact opposites, this is also the same principle with left and right. Here's another example:

/* Margin Shorthand (Bottom and Left Margin values are missing but bottom margin = 25px and left margin = 50px) */
margin:25px 50px;

/* Padding Shorthand (Bottom and Left padding values are missing but bottom padding = 25px and left padding = 50px) */
padding:25px 50px;

If the value is not written then CSS will interpret whatever the missing values opposite's value is.

Clever huh? Thats why shorthand can be so useful and save you time. Of course margin and padding are not the only attributes that can be sweeted up by using shorthand. There are alot more attributes out there, but seems margin and padding are two of the most common attributes in CSS it's vital you get used to the shorthand methods!