It can be annoying to have to use all the individual side versions of these properties when you don't want every side to have the same margin or padding. Luckily, CSS has shorthand properties that can help, much like the shorthand border property!

When you apply a margin and padding property and set one value, it will apply to all sides of your element. But if there are sides with unique values, you don't need to write a styling rule for each direction. Instead, you can use the generic property form and write out all four values, separated by spaces. The values are ordered starting with the top setting and going clockwise.

<div style="margin: top right bottom left;"></div>

Alternatively, if the top and bottom share one value, and the left and right share another value, you can use the same shorthand but note two values instead of all four.

<div style="margin: top/bottom left/right;"></div>

style="margin:10px 20px 5px 25px;"

style="padding:10px 20px;"

Since the border shorthand property contains different value sets, we can set only one size value per property. Differing border values are typically uncommon, but in the event you need one or more sides to appear different from the rest, you have options.

As was shown on the previous page, it's best to set your main style first, followed by any subsequent variations.

<div style="border: 3px solid green; border-left: 6px dotted #222E50;"></div>

You Try!

Using your own text editor or the coding space below, create a div with several text elements and practice applying what you've learned. Use the shorthand values for margin and padding, as well as various border styles and see how creative you can get!