CSS Tutorials : Lesson 9 : CSS Padding

CSS Tutorials : Lesson 9 – Padding

In this tutorial you will learn about Cascading Style Sheets (CSS) Padding,

The padding is the space between the element border and the element content from the four sides, the padding attributes enables you to increase or decrease this space; unlike spacing padding space values can't be negative.

To declare the padding you can use the following properties:
padding-top, padding-right, padding-bottom, and/or padding-left.
The values of these properties can be an absolute length, a percentage.

Example:

table
{
padding-top: 5px;
padding -right:3px;
padding -bottom: 5px;
padding -left: 2px;
}

This sets the top padding of the < table > element to 5 pixels, the right padding to 3 pixels, the bottom padding to 5 pixels, and the left padding to 2 pixels.

Using the shortcut

A shortcut property can be used to set all sides padding in one declaration; the property is “padding”, and the order is:

padding-top, then padding-right, then padding-bottom, and finally padding-left.

Example:

The previous example can be written as:

table
{
margin: 5px 3px 5px 2px;
}

This will cause the same effect as the previous example.

You can use from one to four values for the “padding” property, and how the browser will assign a value for each side works the same as in borders and margins.