A Little Padding for Safety

Similar to margins, padding is used to add extra space to elements. However, padding differs from margins in that padding adds space inside the rectangular area of an element, as opposed to around it. As an example, if you create a style rule for an element that establishes a width of 50 pixels and a height of 30 pixels, and then sets the padding of the rule to 5 pixels, the remaining content area will be 40 pixels by 20 pixels. Also, because the padding of an element appears within the element's content area, it will assume the same style as the content of the element, including the background color.

You specify the padding of a style rule using one of the padding properties, which work very much like the margin properties. The following padding properties are available for use in setting the padding of style rules:

• padding-top Sets the top padding.

• padding-right Sets the right padding.

• padding-bottom Sets the bottom padding.

• padding-left Sets the left padding.

• padding Sets the top, right, bottom, and left padding as a single property.

As with margins, you can set the padding of style rules using individual padding properties or the single padding property. Padding can also be expressed using either a unit of measurement or a percentage. Following is an example of how you might set the left and right padding for a style rule so that there are 10 pixels of padding on each side of an element's content:

 padding-left:10px; padding-right:10px; 

Also as with margins, you can set all the padding for an element with a single property, the padding property. You can use the same three approaches available for the margin property to set the padding property. Following is an example of how you would set the vertical padding (top/bottom) to 12 pixels and the horizontal padding (left/right) to 8 pixels for a style rule:

 padding:12px 8px; 

Following is more explicit code that performs the same task by specifying all the padding values:

 padding:12px 8px 12px 8px;