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.) 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.To add padding around an element: 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%). Figure 11.22. Now we'll add padding to the contents of the screen divto the top, right, and bottom, but not the left.
Tips
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. |