Padding in Practice

The following example shows two boxes; one with no padding, and one with padding.

Notice that the padding creates space between the text and the box border/edge. Since the padding is set to 2em, the size of padding is the same as the width of 2 ‘m’s.

Padding as Size Control

You can also use the padding property to get elements to be shown without containing content. This is the second method we have to control the size of boxes.

In the following example, notice the two different methods of specifying padding: ems, and percentage, respectively.