Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

Using Padding

Padding enables you to style the space that lies between the content and its border. In this chapter'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).