CSS Shorthand

CSS shorthand is to me a no brainer and it’s use can have huge benefits – some of which include smaller file sizes, less code to read and it makes files quicker and easier to comprehend and maintain.

In this post I’m going to be talking about box styling – any CSS effects that can be implemented on all 4 sides of an element. This can include:

  • padding
  • margins
  • borders

There are 4 different ways of ways of applying styles to the sides of an element. The most conventional is the longest version which styles the sides clockwise from top, right, bottom and left. You can remember this as TrouBLe. This method allows you to set a different style on all 4 sides.

element{padding: [top] [right] [bottom] [left]}

Using 3 figures allows you to style the top, with left and right at the same time, followed by the bottom. This is useful if you require the same size on the left and right, but a different size for top and bottom.

element{padding: [top] [left/right] [bottom]}

Styling both the top and bottom, and the left and right sides can be done using 2 figures. This can be used when the top and bottom sizes are the same and the left and right sizes are the same.

element{padding: [top/bottom] [left/right]}

The last possibility is where all sides have the same size declaration. This can be achieved by using just one value.

element{padding: [top/bottom/left/right]}

Bonus Tip

When using 0 as a value, it doesn’t matter whether it is a pixel, em or any other measure so whenever using 0, just declare it on its own.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>