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.

The following example, shows to 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 {
    padding: 0px;
}

.with-padding {
    padding: 2em;
}

.padding-example-container {
    font-size: 18pt;
}

.ex-box {
    line-height: 1.45em;
    background-color: #90debb;
}

<div class="padding-example-container">
    <p class="no-padding ex-box">
        <strong>No Padding</strong><br />
        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.
    </p>
    <p class="with-padding ex-box">
        <strong>With Padding!</strong><br />
        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....
    </p>
</div>

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. You should, open the example in another tab and resize the window to observe the difference.

.parent-container-01 {
    font-size: 18pt;
    padding: 4em;
    background-color: #6a9aa4;
    margin-bottom: 4px;
}
.child-container-01 {
    padding: 2em;
    background-color: #a4966a;
}
.parent-container-02 {
    font-size: 18pt;
    padding: 10%;
    background-color: #6a9aa4;
}
.child-container-02 {
    padding: 10%;
    background-color: #a4966a;
}

<div class="parent-container-01">
    <div class="child-container-01"></div>
</div>
<div class="parent-container-02">
    <div class="child-container-02"></div>
</div>

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;
}