Section 19.5. Padding

19.5. Padding

The padding area is an optional amount of space held between the content area of an element and its border. If you are putting a border on an element, it is usually a good idea to add a bit of padding as well to keep the border from bumping against the content.

Now that you've seen margins and borders at work, the padding properties should look familiar. There are side-specific properties for setting an amount of padding on each side by name, and a shorthand padding property that applies padding to combinations of four sides.

Overriding Shorthand Properties

One of the principles of the cascade is that rules that appear later in a style sheet override previous rules. You can use this principle to override shorthand settings for one side of an element box.

In this example, all four sides of a box are given a solid red border, but then the right edge is immediately overridden by a rule that sets the border to none (thus removing it).

     p.tip { border: solid red 3px;             border-right: none; } 

In addition to borders, this trick can be used with any of the shorthand and side-specific properties in this chapter.

padding-top, padding-right, padding-bottom, padding-left

---

Values:

     <length> | <percentage> | inherit 

Initial value:

     0 

Applies to:

All elements

Inherited:

No

padding

---

Values:

     [<length> | <percentage> ]{1,4} | inherit 

Initial value:

     0 

Applies to:

All elements

Inherited:

No

The padding properties specify the width of the padding area. Values may be provided in units of length or as percentages. Negative values are not permitted for padding.

It is important to note that, as for margins, percentage values are always calculated based on the width of the parent element (even for top and bottom padding). So if the width of the parent element should change, so will the percentage padding values on all sides of the child element.

Figure 19-11 shows examples of element padding.

     h2#A {padding: 4px; background: #CCC;}     h2#B {padding: 20px; background: #CCC;}     <h2 >Sed ultrices ligula at metus.</h2>     <h2 >Sed ultrices ligula at metus.</h2> 

Figure 19-11. Adding padding around elements

Background colors and images applied to an element will display in its padding area (this sets it apart from margins, which are always transparent). So if you want an element to appear in a colored box, with or without an explicit border, padding is the way to put a little space between the edge of the box and the content.

Padding does not collapse as margins do. The total padding between elements will be the sum of the padding for the adjacent sides of the elements.