Padding -- CSS Guide- Cascading Style Sheets

davesite.com / webstation / css

Cascading Style Sheets: an Interactive Tutorial

Padding

advertisement

advertisement
#1 Web Hosting Plan! Free Software & Tools!
1000GB space, 1000GB bandwidth, just $4.44!

If you are reading this for a class and your professor wants you to summarize any two chapters, I'd definitely pair this one with the margin chapter!
padding: is just like a margin, except it's the white space between the margin (and border) and the actual content. Unlike margin, which inherits the background color of whatever is around the margin, padding uses the background-color specified for whatever it is padding (e.g. the "content content").

Padding is just as simple as margin to use, and it follows the same format (A B C and D as pictured). If you want a paragraph to have 5px (pixels) of padding all around it, you could use:
p { padding: 5px 5px 5px 5px; }

You can also use auto or a % (percentage), just like a margin.
The four individual padding properties are padding-top, padding-right, padding-bottom, and padding-left.
Ready to test your skills? Make a paragraph selector with padding of 10px on the right and left, and 5px on the top and bottom. Add a background-color of #EEEEEE to spice things up.
<html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Click here if you get stuck or want to see how I did it.
advertisement

< Chapter 8 > Chapter 10

Chapter Selection

Introduction
Basics of CSS
All About Selectors
Background and Color
Fonts and Text
Links
Lists
Margin
Padding
Border
Good CSS Design
Resources

[ jump to top ]

Learn about the #1 Ranked Web Host. 100 GB Space.
Up to 7 Web Sites. Free Domain & Setup. Click Here.