HTML and CSS —

Using Padding

Padding enables you to style the space that lies between the content and its border. In this tutorial's previous examples, you'll notice elements that are flush against their borders and margins. Padding helps to solve this issue. You can add padding to an individual side using length values such as pixels or percentages. The individual padding properties are padding-top, padding-right, padding-bottom, and padding-left. You can see each of these in use in Example 11-5.

Example 11-5. Using padding properties to add whitespace
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color:
 black; margin-top: 10px;}
h1 {font-size: 24px; color: orange; border-bottom: 2px dotted lime; padding-bottom: 10px;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc; text-indent: 15px;}
p {border: thin solid orange; padding-top: 15px; padding-right: 30px; padding-bottom: 0;
 padding-left: 30px;}

You'll notice the padding separating the H1 text from its border, and the padding to the top, right, bottom, and left of the paragraph (see Figure 11-8).

Figure 11-8. Adding padding to gain whitespace.