Приглашаем посетить
Чулков (chulkov.lit-info.ru)

Padding

Previous Page
Table of Contents
Next Page

Padding

Padding 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 Properties
p { 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 Specified
p { 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 Specified
p { 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 Specified
p { 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 Specified
p { padding: 1em 2em 2em 1em; }


Previous Page
Table of Contents
Next Page