Skip to Main Content
Cascading Style Sheets: The Definitive Guide
book

Cascading Style Sheets: The Definitive Guide

by Eric A. Meyer
May 2000
Intermediate to advanced content levelIntermediate to advanced
472 pages
14h 17m
English
O'Reilly Media, Inc.
Content preview from Cascading Style Sheets: The Definitive Guide

Padding

Between the borders and the content area, we find the padding of the element box. It will come as 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. That’s all. So if you want all H1 elements to have 10 pixels of padding on all sides, it’s this easy, as the result shown in Figure 7-56 makes clear:

H1 {padding: 10px; background-color: silver;}
Padding applied to an H1 element

Figure 7-56. Padding applied to an H1 element

On the other hand, we might want H1 elements to have uneven padding and H2 elements to have regular padding, as shown in Figure 7-57:

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

Figure 7-57. Uneven padding

It’s a little tough to see the padding, though, so let’s add a background color, as shown in Figure 7-58:

H1 {padding: 10px 0.25em 3ex 3cm; background: silver;} 
H2 {padding: 0.5em 2em; background: silver;}
Uneven padding with background colors

Figure 7-58. Uneven padding with background colors ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Cascading Style Sheets: The Definitive Guide, Second Edition

Cascading Style Sheets: The Definitive Guide, Second Edition

Eric A. Meyer
CSS Mastery: Advanced Web Standards Solutions

CSS Mastery: Advanced Web Standards Solutions

Andy Budd, Simon Collison, Cameron Moll

Publisher Resources

ISBN: 1565926226Catalog PageErrata