65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code tutorial
CSS Padding
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!
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
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.
Click here if you get stuck or want to see how I did it.
| < Chapter 8 | > continue to Chapter 10 |
The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!