How to remember CSS Shorthand properties


Using margin or padding properties of CSS in the following syntax is straight forward.


{
 padding-top:5px;
 padding-right:12px;
 padding-bottom: 15px;
 padding-left: 20px;
}

But the shorthand version of these properties may be a little difficult to remember for CSS beginners.
The above CSS declaration can be written as;


{padding:5px 12px 15px 20px;}

Now how do you know which one is which? The answer to this is simple. First value (5px in this example) applies to top and then you move clockwise, 2nd applies to right, the 3rd applies to bottom and the 4th value applies to left.

Leave a Reply

Your email address will not be published. Required fields are marked *