The Padding Properties

Padding is the spacing surrounding the edge of an element's content area. If the element has a border, then padding comes between the inner edge of the border and the outer edge of the content area. An element's background image or background color, will extend into the padding.

Unlike margins, when the padding of two elements come into contact, they do not collapse.

Padding can be applied to any element. It can accept length values, percentage values and the keyword inherit. Percentage values refer to the width of the containing block. Unlike margins, padding cannot be negative.

There are five padding properties: padding, padding-top, padding-right, padding-bottom and padding-left. The padding property can take up to four space separated values. With four values, the padding lengths specified are the top, right, bottom and left padding, in that order. With three values, the padding lengths specified are top, right and left together, and bottom, in that order. With two values, the padding lengths specified are top and bottom together and the right and left together. With one value, all the sides get the same padding.

padding with px values

Padding can be specified in px as shown in the example below.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;"><span>the quick brown fox</span> jumps over the lazy dog, the five boxing wizards jump quickly</p>

As can be seen in the example above, since is English is a left-to-right language, the space at the end of each sentence may be greater than the padding because when a word does not fit at the end of a line, the browser puts it in the next line. However, the space on the left, top and bottom always remains the same.

When padding overflows an element, it behave the same as content area that has overflowed. Therefore, when padding overflows the viewport, the browser puts a horizontal scroll bar which enables it to be viewed.

padding with percentage values

A padding declaration with percentage values refers to the width of the containing block. Note that even top and bottom padding specified in percentages refer to the width of the containing block.

Example 2: <div style="font-size:35px;font-family:'Times New Roman';width:600px;border-width:5px;border-style:solid;padding:0;margin:0"><p style="padding:10%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

When an element has an inline element as its parent, percentage padding will depend not on the width of its parent (which is an inline element) but on the width of the ancestor block element.

padding with em values

A padding declaration with em values refers to the font size of the element to which the padding declaration applies.

Example 3: <p style="font-family:'Times New Roman';font-size:20px;padding:2em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

Padding on Inline Non-Replaced Elements

Padding can be applied to inline non-replaced elements such as spans. Left and right padding on inline non-replaced elements is allocated horizontal space and therefore "pushes" adjacent content away. However, top and bottom padding on inline non-replaced elements is not allocated space and may therefore overlap content above and below an element.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';" >the quick brown fox j<span style="padding:20px">u</span><span style="padding:10px">m</span>ps over the lazy dog</p>

Note that left and right padding on a span (or other inline element) containing more than one line of text appears only at the beginning and end of the span (or inline element).

Padding on Inline Replaced Elements

Padding applied to inline replaced elements such as images behaves differently from padding on inline non-replaced elements. The main difference is that space is allocated to both top and bottom padding and left and right padding. Also, the outer edge of bottom padding will be on the baseline of the element.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';" >the five boxing wizards jump quickly. the quick brown f<img src="20x50.jpg" alt="20x50.jpg" style="background-color:blue;padding:10px">ox jumps over the lazy dog</p>

Specifying padding on individual sides of an element

Padding can be specified individually on an element using the padding-top, padding-right, padding-bottom and padding-left properties and by putting multiple (upto 4) values on a padding declaration.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px">the quick brown fox jumps over the lazy dog. a b c d <span>the five boxing wizards jump quickly</span></p>

The same effect can also be achieved using the shorthand padding property with four values:

Example 7: <p style="font-size:35px;font-family:'Times New Roman';padding: 10px 20px 30px 40px">the quick brown fox jumps over the lazy dog. a b c d <span>the five boxing wizards jump quickly</span></p>