DJ's site

There are CSS properties which you can define different for each side. These are the padding, margin and various border properties of an element. Let's use padding as an example:

p {
  padding-top: 0.2em;
  padding-right: 0.3em;
  padding-bottom: 0.4em;
  padding-left: 0.5em;
}

CSS allows you to specify all of them on one line using this shorthand notation:

p {
  padding: 0.2em 0.3em 0.4em 0.5em;
}

There are even shorter ways, in case you want opposite sides to use the same value. The rule of thumb is to start at the top and continue clockwise. Every omitted value will be used from it's opposite side.

p {
  padding: 0.2em 0.3em 0.4em; /* top, sides, bottom */
}

p {
  padding: 0.2em 0.3em; /* top and bottom, sides */
}

p {
  padding: 0.2em; /* all 4 sides the same */
}