CSS shorthand properties

CSS (Cascading Style Sheets) is a language used to describe the design style of a website. It is becoming more and more common for web designers to rely on CSS completely to define their layouts, eliminating the need for tables

Padding & Margin Shorthand

CSS allows you to define all sides of a padding and margin in one line. This can save you a great deal of time and will make your code look much neater:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/* Instead of... */ padding-top:10px; padding-bottom:20px; padding-left:30px; padding-right:40px; margin-top:10px; margin-bottom:20px; margin-left:30px; margin-right:40px; /* ...you can use... */ padding: 10px 40px 20px 30px; margin: 10px 40px 20px 30px; /* The shorthand method works as follows: */ padding: TOP RIGHT BOTTOM LEFT; margin: TOP RIGHT BOTTOM LEFT;

There’s another shorthand method which is even shorted. Say your top and bottom both have a padding of 20px and your right and left both have a padding of 30px. You could easily do this by writing the following CSS:

1	padding:20px 30px;

If you only write two values, your browser will assume that the first value is for both the top and the bottom and the second value is for the right and left.

What if you write three values like the following?

1	padding:20px 30px 10px;

In this case, your browser will still consider the second value to be the left and right. So using the code above, you would have 20px padding-top, 10px padding-bottom and 30px padding on either side.