To write CSS margins and padding shorthand they work the same way. My example here is using padding. For shorthand you start at the top of the element (ID, class, etc…) and go clockwise around. You will end up with TOP RIGHT BOTTOM LEFT, but there are shorthands for the shorthand. I’ll explain.

CSS Padding Properties

element {
  padding-top: number unit;  (10px, 1.1em)
  padding-right: number unit;
  padding-bottom: number unit;
  padding-left: number unit;
}

Padding Shorthand Property

/* top right bottom left */
padding: 7px 3px 6px 4px;

In most cases, you will want the padding to be same on at least two of the side and you can declare values of opposed sides when they are the same. Here is how that would look in a shorthand format

/* padding on all side of 5 pixel */
padding: 5px;

/* padding on top and bottom 10px - right and left 5px */
padding: 10px 5px;

/* padding on top 10px - bottom 20px - right and left 5px  (are the same) */
padding: 10px 5px 20px;

Margin can be written in this same shorthand manner.