How do I use the short form css padding, border & margin?

[hoodedvul]

Padding, border and margin are part of the box model in CSS. The picture below from https://en.wikipedia.org/wiki/CSS_box_model, shows the box model.

The padding, border, and margin all have top, right, bottom, and left properties. If we use border as an example. To make it easier to remember; think of it as going clockwise

The border has border-width, border-style, and border-color. border-width, is top, right, bottom and left width sizes.

Rather than specifying each of these individually. CSS provides a shorthand way which is easier to read.

In shorthand: border-width is 2px for top, right, bottom and left, border-style is solid, and border-color is blue.

border:  2px solid blue

padding & margin does not have the color or style properties, just top, right, bottom and left.

Instead of specifying padding-top, padding-right, padding-bottom and padding-left individually; you can use the shorthand form.

padding: 10px 30px 10px 5px

If top and bottom padding is the same and right and left padding is the same, you can use

padding: 10px 30px