Padding Shorthand

Padding Shorthand

You can use shorthand with padding, too, using the padding property. Shorthand for padding most closely resembles the way margin shorthand is managed.

This means that order is imperative, and you'll run into TRouBLe really quickly if you don't remember that! You must place your values in the top, right, bottom, left order for them to work:

p {padding: 15px 30px 25px 0;}

This rule results in a paragraph with 15 pixels of padding to the top, 30 pixels to the right, 25 pixels to the bottom, and 0 pixels to the left (see Figure 11-9).

You can also use combinations of two and three values, which work the same way as described for margin shorthand earlier this chapter. Finally, a single value applies to all four sides of the element's box.