You may have realized so far that it can be annoying to use all of the individual side versions of these properties when you don’t want every side to have the same margin, padding or border. Luckily, CSS has a couple shortcuts you can take to accomplish the same goal.

As we’ve learned, with margins and padding, you set a generic property of “margin” or “padding” to apply the value to every side. 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.

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

Alternatively, if you have a case where the top and bottom share one value, and the left and right share another, you can use the notation for these pairs, like this:

style="padding:10px 20px"

Unfortunately, this approach will not work with the border property since it already needs to use the “all values on one line” trick to lump all of its sub-properties together. Setting multiple, differing borders around one element shouldn’t often be necessary, anyway.

If you need one unique border, or the same border all the way around, use the appropriate property as we’ve discussed on the previous page. But if you need a border on three sides, add a generic “border” property, and then set the last direction’s border property to “none” so that side will have no border. This is faster than setting a separate border property to each of the three directions needed.