HTML and CSS

Padding Shorthand

You can use shorthand with padding, too, using the padding property. Shorthand for padding most closely resembles the way margin shorthand is managed.

This means that order is imperative, and you'll run into TRouBLe really quickly if you don't remember that! You must place your values in the top, right, bottom, left order for them to work:

p {padding: 15px 30px 25px 0;}

This rule results in a paragraph with 15 pixels of padding to the top, 30 pixels to the right, 25 pixels to the bottom, and 0 pixels to the left.

Using the padding shorthand property to manage the padding of the paragraph.

You can also use combinations of two and three values, which work the same way as described for margin shorthand earlier this tutorial. Finally, a single value applies to all four sides of the element's box.

Toward Gaining More Control…

Certainly, beginning to explore the Box Model and understand how elements work when CSS is added to the mix brings you even further along the road to gaining more control over your designs.

One area that I want to remind you of is having the correct document structure. Because of the DOCTYPE switching technology mentioned early on in this tutorial, it becomes imperative to ensure that you are using a correct DOCTYPE, to make sure you don't have problems with the Box Model in IE 6.0.

If you've followed the methods in this tutorial, you won't need to worry about it. See? There really is a method to my madness!

Next up, the holy grail of CSS: positioning. Are you ready? Let's go!

by BrainBellupdated
Advertisement: