Padding

Padding defines how much space there is between the content area of a box and the border of a box.

In the old days when tables were used for the layout of pages, we might have used the cellpadding table attribute to achieve the effect as the padding property of boxes. Padding only has one value, a length. The length can be specified in any valid length units, absolute, or relative.

Padding does NOT inherit.
The default padding for all elements is a value of 0. An element will not have padding unless you explicitly set a padding value for it.

Padding may be given in relative or absolute length units. Padding must be specified as positive values.
A percentage value may be specified. The percentage is calculated with respect to the width of the element's containing block. Note that this is true for 'padding-top' and 'padding-bottom' as well

You can specify different values of padding for each side of the box using the padding-top, padding-bottom, padding-right and padding-left properties.

For example, the following rule sets different padding values for each of the four sides of an element box:

.paddingExample1 {
  padding-top: 5%;
  padding-right: 2px;
  padding-bottom: 1.4em;
  padding-left: 3px;
  }

Padding also has a shorthand notation that allows one to set all four individual padding properties in one statement. The furnished values start at the top of the box and are applied in clockwise order: top padding, right padding, bottom padding and left padding.

Padding Shorthand Notation:

padding: topValue rightValue bottomValue leftValue;

When declaring padding using shorthand notation, simply think of a clock. Start at 12 (top), proceeding clockwise to 3 (right), to 6 (bottom) to 9 o'clock (left).

Each value is separated by spaces!

Here is our simple example above re-written in padding shorthand:

.paddingExample1 {
  padding: 50% 2px 1.4em 3px;
  }

When using the shorthand notation you can provide any of the 4 possible values in any combination of units, though you do not need to provide all of the values. Each declared value is assigned corresponding to the order of the sides in the shorthand notation. In other words, the first declared value is assigned to the top padding. If there is a second value, then that value is assigned to the right padding, and so on ...

Any undeclared side is assigned the value declared for its opposite side. If padding for the left side of the box is not explicitly given a value, then the left side adopts the padding value given to the right side of the box.

Rules for assigning undeclared padding values in the shorthand notation:

As usual, if the value is 0 you do not need to specify the unit (scale) of measurement. If the value is anything other zero then you must provide the measurement scale.

The undeclared values are assigned based on the values that are declared.

If one value is declared, then all of the sides are set to the single value provided.
If two values are provided (TOP and RIGHT), the BOTTOM padding takes the value declared for the TOP padding, and the LEFT padding adopts the value declared for the RIGHT padding.
If three values are provided (TOP, RIGHT and BOTTOM), the LEFT padding adopts the value declared for the RIGHT padding.

Here are some examples of padding shorthand notation:

All four values are set to 1em:

.padding_Eg1 { padding: 1em; }

---
Top and Right padding are specified.

.padding_Eg2 { padding: 1em 10px; }

Bottom padding adopts Top padding, 1em;
Left padding adopts Right padding, 10px.

---
Top, Right and Bottom padding specified.

.padding_Eg3 { padding: 1.2em 5px 2em; }

Left padding adopts value from Right padding, 5px.

It is very common to use the shorthand property to set all padding to some default, then override a specific side's value:

.paddingExample4 {  
  padding:      10px;   /* set padding for all 4 sides */ 
  padding-left: 20px;   /* setting padding for the left */ 
  background-color: #DEE7EC; 
  }

Here are some examples:

This paragraph does not have any padding set. Notice that the content is up against the box itself.

In this paragraph I have set the padding-left to 20px - there is some room on the left side, but not for the top, right, and bottom sides of the box.

In this paragraph I have set the padding to 20px so that all four sides of the content display a little extra space... more readable and attractive to me :-)

An inline element can also have its own padding properties associated with it. You aren't restricted to applying padding to only block elements.

This paragraph has an EM element within the paragraph. I've styled the EM element to have a padding of 10px... it looks like an inappropriate use of padding for this specific content, but you may find a need to apply padding to inline elements in other instances.

It is quite common to set the padding/margin on the left and right to a fixed unit for layout purposes, but then use a relative unit for the top and bottom sides to keep the text proportionally spaced vertically. Pages designed this way maintain a consistent columnar layout while the vertical spacing can adjust proportionally if the size of the text is changed.

Borders, Padding and Margins

Padding