Web Design in a Nutshell, 3rd Edition

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 id="A">Sed ultrices ligula at metus.</h2>
    <h2 id="B">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.