Adding Padding Around an Element

Padding is just what it sounds like: extra space around the contents of an element but inside the border. Think of Santa Claus' bellynicely padded, while being held in by his belt (the border). You can change the padding's thickness, but not its color or texture. (Margins are Santa's personal space.)

Type padding: x, where x is the amount of desired space to be added, expressed in units (10px) or as a percentage of the width of the parent element (20%).

Tips

As with the margin property, if you use one value, the specified padding is applied to all four sides equally. If you use two values, the first value applies to the top and bottom and the second value applies to the right and left. If you use three values, the first applies to the top, the second to the right and left, and the third to the bottom. If you use four values, they are applied to the top, right, bottom, and left, in clockwise order.
You can also add one of the following suffixes to the padding property to apply padding to a single side: -top, -bottom, -left, or -right. There should be no space between the word padding and the suffix (e.g., padding-right: 1em).

Figure 11.23. Padding added to the screen div goes between its contents and its margin. Notice the extra 10 pixels between photobarcelona and the top edge and between the word archives in the menu and the right edge.

[View full size image]
Padding is not inherited.
Use percentages or ems to create liquid layouts that expand or contract depending on the visitor's monitor.
The space after the colon is optional. There is never a space between the number and the unit.

Adding Padding Around an Element

Figure 11.20. When you set four values for `padding`, they are assigned to the top, right, bottom, and left, in that order. So, here, there will only be padding on the top and right.

Figure 11.21. When we add padding to the wrap div, we are actually adding padding between its contents (in this case, the screen div) and its margin (that we set on the previous page). Padding added to the `wrap` div uses the background image from the `wrap` div.

Figure 11.22. Now we'll add padding to the contents of the screen divto the top, right, and bottom, but not the left.

Figure 11.23. Padding added to the `screen` div goes between its contents and its margin. Notice the extra 10 pixels between photobarcelona and the top edge and between the word `archives` in the menu and the right edge.

Figure 11.24. When the screen background is set to white, it's clear why we didn't need padding to the left as well. I have made a number of other padding adjustments that you can study in the code files on my Web site.

Adding Padding Around an Element

Figure 11.20. When you set four values for padding, they are assigned to the top, right, bottom, and left, in that order. So, here, there will only be padding on the top and right.

Figure 11.21. When we add padding to the wrap div, we are actually adding padding between its contents (in this case, the screen div) and its margin (that we set on the previous page). Padding added to the wrap div uses the background image from the wrap div.

Figure 11.22. Now we'll add padding to the contents of the screen divto the top, right, and bottom, but not the left.

Figure 11.23. Padding added to the screen div goes between its contents and its margin. Notice the extra 10 pixels between photobarcelona and the top edge and between the word archives in the menu and the right edge.

Figure 11.24. When the screen background is set to white, it's clear why we didn't need padding to the left as well. I have made a number of other padding adjustments that you can study in the code files on my Web site.

Figure 11.20. When you set four values for `padding`, they are assigned to the top, right, bottom, and left, in that order. So, here, there will only be padding on the top and right.

Figure 11.21. When we add padding to the wrap div, we are actually adding padding between its contents (in this case, the screen div) and its margin (that we set on the previous page). Padding added to the `wrap` div uses the background image from the `wrap` div.

Figure 11.23. Padding added to the `screen` div goes between its contents and its margin. Notice the extra 10 pixels between photobarcelona and the top edge and between the word `archives` in the menu and the right edge.