Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 159

Listing 5-40. List Styles That Can Be Shortened

ul.tick {
list-style-image: url('tick.png');
list-style-type: none;
list-style-position: inside;
}

Listing 5-41. A One-Line Rule for Three List Styling Property Values

ul.tick {
list-style: url('tick.png') none inside;
}

Shorthand Notation for Padding, Border, and Margin Properties
There are five properties for setting the top, right, bottom, and left padding ( padding-top , padding-right ,
padding-bottom , padding-left , respectively) or all of them together with the shorthand property padding . Similar
conventions exist for borders ( border-top , border-right , border-bottom , border-left , border ) and margins
( margin-top , margin-right , margin-bottom , margin-left , margin ). There are various options for shortening the
enumeration of property values in a certain order:

• Four values set the padding of each side: the top, the right, the bottom, and finally the left

padding (clockwise, starting from top) (Listing 5-42).

Listing 5-42. Padding Shorthand Property with Four Values
#decor {
padding: 10px 5px 20px 30px;
}

■ this order is worth memorizing, because it can be used not only for padding but also for borders, margins, and
CSS3 properties such as border-radius .

Tip

• Three values set the top, right, and left (equally), and the bottom padding (Listing 5-43).

Listing 5-43. Padding Shorthand Property with Three Values

#decor {
padding: 10px 20px 15px;
}

• Two values set an equal padding for the top and bottom sides, and then an equal padding for

the right and left sides (Listing 5-44).

Listing 5-44. Padding Shorthand Property with Two Values

#decor {
padding: 30px 20px;
}