|
|---|
|
| |
|
|
Putting Style Sheets in Perspectivepadding |
|
Padding may be applied equally to all four sides of the content box
or each side can be specified as a different value. Each of the
four boxes below have the value they are illustrating applied to
them. It doesn't make for a very pretty display, but it does
allow you to better visualize the affects of different padding
values.
A padding of 1em will be applied equally to all four sides of the content
box. Of course, if there's not enough text to stretch across to the
padding on the right side, the padding may appear to be un-even.
.pone { padding: 1em; }
When two values are given, the first value is applied to the top and
bottom, the second value is applied to the right and left sides.
.ptwo { padding: 1em 2em; }
Three values are applied; 0em to the top, 3em to the left and right
sides, and 1em to the the bottom.
.pthree { padding: 0em 3em 1em ; }
Four values are applied to the top, right, bottom and left, in that order.
.pfour { padding: 0em 3em 1em 9em ; }
Are you beginning to see the possibilities of padding? It looks rather gawky with the borders turned on everywhere, but that is easily remedied.
A quick change of your left and right side padding will affect an indentation of a block of text.
Putting Style Sheets in Perspective: Box Model 
|
|---|
|