6CSS Shorthands

Every Front-end
Dev Should Know

Pradeep Pandey
01

Margin and Padding

The use of values for margin and padding are same.

No Shorthand:

With Shorthand:

Pradeep Pandey
02

Margin and Padding

The order of values is very important. To make it

easier to remember, think of a clock. The first value is
for the top and rotates clockwise. The next value is
the one on the right, then the bottom and finally the
left.

If the value is the same for all sides, you can use only
one value.

Pradeep Pandey
03

Margin and Padding

And if you need a value for the top and bottom and
another value for the right and left, you can do it as
follows.

It is also possible to use 3 values.

And in this case, the first value sets the top margin,
the second sets the right and left margins, and the
third sets the bottom margin.

Pradeep Pandey
04

Border
No Shorthand:

With Shorthand:

Pradeep Pandey
05

Background
No Shorthand:

With Shorthand:

Pradeep Pandey
06

Font
No Shorthand:

With Shorthand:

Pradeep Pandey
07

Image and position

No Shorthand:

With Shorthand:

Pradeep Pandey
 Thanks for reading
Did you find it Useful?

Follow for more !

Pradeep Pandey
@Div__Pradeep