PaddingPadding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content. Like margins, padding can be applied to individual sides of a box as shown in Listing 5.6. Listing 5.6. CSS Code Containing Various padding Propertiesp { padding: 1em; } h1 { padding-top: 0; } h2 { padding-right: 2em; } h2 { padding-bottom: 3em; } h3 { padding-left: 1em; } Padding also can be applied using a single shorthand property. If one padding value is specified, it applies to all sides of an element as shown in Listing 5.7. Listing 5.7. CSS Code Containing the Shorthand padding Property with One Value Specifiedp { padding: 1em; } If two values are specified, the top and bottom margins are set to the first value and the right and left margins are set to the second as shown in Listing 5.8. Listing 5.8. CSS Code Containing the Shorthand padding Property with Two Values Specifiedp { padding: 1em 0; } If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third as shown in Listing 5.9. Listing 5.9. CSS Code Containing the Shorthand margin Property with Three Values Specifiedp { padding: 1em 0 2em; } If four values are specified, they apply to the top, right, bottom, and left as shown in Listing 5.10. Listing 5.10. CSS Code Containing the Shorthand padding Property with Four Values Specifiedp { padding: 1em 2em 2em 1em; } |