Padding:
Padding, as seen on the box model image, is the amount of space between the inner content of the element and the element itself.
Padding 
An Example
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.
No Padding
Lots of fun text discussing somethiung important that you need to get out into the world. Unfortunately, this text is so close to the edge of the box, that it looks cluttered.
With Padding!
This text looks so much better since it has space between the text itself and the edge of teh box. It is like it can breath; like it can think; like it is luxurious. Mmmmm, this looks good....
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.
Set Individual Sides
You can also control the padding of individual sides. This is accomplished by calling them individually.
.box-00 {
padding-left: 10%;
padding-right: 18pt;
padding-top: 20px;
padding-bottom: 1em;
}
{ TODO: }
- Open the example in a separate tab and resize the window to observe the difference.
- Read page 313 of Chapter 13 in Duckett.