Padding

In a previous chapter, we talked about margins, which is the amount of extra whitespace added to the sides of an element. Padding is just the same, but on the inside of the element. In other words, padding is an inner, invisible border around your element.

By default, most block level elements have zero padding, meaning that text and other content will go all the way to the edge of the parent element. This is usually not desirable, especially if the parent element has borders:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
}
</style>

<div class="box">
	Hello, world!
</div>

If you try the example, you will notice the text being very close to the edges of the surrounding box, which is usually not what you want. You could of course fix this by adding margin to the text element itself, but in that case, you would have to do it for every element you put into box-elements. Instead, you can just apply a padding to the box, which will push all child elements away from the borders. This is done with one or several of the padding properties called padding-top, padding-right, padding-bottom and padding-left:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
</style>

<div class="box">
	Hello, world!
</div>

With that in place, there will now be a nice amount of whitespace inside the borders of the box.

Using the padding shorthand property

As for margins, paddings can also be applied with a shorthand property called "padding". It allows you to define padding values for all four sides, without having to repeat all the property names each time. The padding property simply directs your values out to the padding-top, padding -right, padding -bottom and padding -left properties, so it's just another way of using the CSS syntax, which will shorten your code in many situations.

The padding property can take from one to four values. This allows you to specify paddings for all four sides of an element, but if all four values are the same, you can shorten it to just one value which will be applied to all sides. If you have the same value for top and bottom padding, and another value which should be applied to both the left and right paddings, you can just have two values. Confused? Hopefully not, but here's an example where we use all of the mentioned approaches:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	width: 100px;
	height: 100px;
	margin: 10px;
}
</style>

<div class="box" style="padding: 10px 10px 10px 10px;">
	Box
</div>

<div class="box" style="padding: 10px 10px;">
	Box
</div>

<div class="box" style="padding: 10px;">
	Box
</div>

Notice how I start with the most verbose way, where I declare all four values, and then work my way down.

But which order should they be in? And how does the various versions work? When specifying paddings, the following rules apply:

4 values:

1. [top padding]
2. [right padding]
3. [bottom padding]
4. [left padding]

3 values (not as commonly used):

1. [top padding]
2. [left/right padding]
3. [bottom padding]

2 values:

1. [top/bottom padding]
2. [left/right padding]

1 value:

1. [top/right/bottom/left padding]

Relative paddings

A lot of paddings will be specified in absolute values (usually pixels, like we saw in the first example), but just like most other size related CSS properties, you may also use relative values. This is usually done by either using a relative size unit, for instance the em unit (1 em equals the size of the current font), or simply by specifying a percentage-based value.

In the next example, I have specified a common padding of 1em, and then I have applied a different font-size, measured in em's, for each of the three boxes:

<style type="text/css">
.box {
	border: 2px solid CadetBlue;
	background-color: Gainsboro;
	width: 100px;
	height: 100px;
	padding: 1em;
	margin: 10px;
}
</style>

<div class="box" style="font-size: 1em;">
	Box
</div>

<div class="box" style="font-size: 2em;">
	Box
</div>

<div class="box" style="font-size: 3em;">
	Box
</div>

Now if you try to run this example, you will notice that even though the boxes share the same actual padding value, the padding is now relative to the font-size, meaning that it grows when the font-size is increased. This is useful in a lot of situations!

Summary

Padding does to the inside of an element what margin does to the outside: It creates extra whitespace. In between the margin and the padding is the border, which we talked about in the previous chapter, and while the border will usually be visible, margin and padding is not.

One very important thing to remember about padding is that it's added to the size of the element. This doesn't really affect you if your element doesn't have a fixed size, but if it does, e.g. 100x100, and you add a padding of 10 pixels to all four sides, then the element will be 120x120 pixels instead. In other words, if your element has to be of a very specific size and you want to apply padding to it, you need to compensate for this when defining the width and height.