• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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;}

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint