CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners


This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

CSS: CSS Padding

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:



Cascading Style Sheets: an Interactive 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!

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.

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!


Copyright © Dave Kristula. All Rights reserved.