As a designer, we remember all the Photoshop shortcuts to help us work faster. Do you know there are also shortcuts in writing CSS? Sometimes we will see a CSS like this..

div { margin: 25px 10px 25px 10px; }

Do not panic, this is the same as..

div { 
margin-top: 25px;
margin-right: 10px;
margin-bottom: 25px;
margin-left: 10px;
 }

The simpler CSS values at the top is the shortcut.

We read those kind of CSS from the top, then go clockwise. So the 4 values are values for the top, right, bottom and left respectively. This can be used for both margin and padding.

div { margin: top right bottom left; }

We can also use it for any properties that have multiple properties such as:

img { 
border-thickness: 2px; 
border-color: black; 
border-style: solid; }

and we can write it as a shortcut like this:

img { border: 2px solid black; }

Basically it is just putting all the border-blabla properties into a single border property with all its values. But please note that if you forget to put a value, then it might not work. Try to play with the values in the live preview below.

Live Preview