HTML and CSS Reference
In-Depth Information
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 .
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;
Search WWH ::

Custom Search