O'Reilly logo

Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Padding

Between the borders and the content area, we find the padding of the element box. It is no surprise that the simplest property used to affect this area is called padding.

As you can see, this property accepts any length value, or a percentage value. So if you want all h1 elements to have 10 pixels of padding on all sides, it’s this easy:

h1 {padding: 10px; background-color: silver;}

On the other hand, you might want h1 elements to have uneven padding and h2 elements to have regular padding:

h1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */
h2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */

It’s a little tough to see the padding if that’s all you add, though, so let’s include a background color, as shown in Figure 8-38:

h1 {padding: 10px 0.25em 3ex 3cm; background: gray;} 
h2 {padding: 0.5em 2em; background: silver;}
Uneven padding with background colors

Figure 8-38. Uneven padding with background colors

As Figure 8-38 illustrates, the background of an element extends into the padding. As we discussed before, it also extends to the outer edge of the border, but the background has to go through the padding before ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required