Controlling Space inside Elements


The padding attributes affect the amount of whitespace between an element's borders and the beginning of the element's content. To get a better idea of how padding works, imagine that every element on screen has its own invisible rectangular box, as in Figure 49.2. Padding adds whitespace between the edge of the box and the content inside.

Figure 49.2. Padding determines the amount of whitespace between an element's outer border and the content inside.


As with margins, there are four padding attributes: padding-top, padding-bottom, padding-left, and padding-right. You can set each separately, and you can omit the ones that you don't need in your style definition:

 p {   padding-top: 20px;   padding-left: 10px; } 

TIP

As with margins, CSS gives you a generic padding attribute. It works the same way: Supply a single value to add equal padding to all four sides, or give four different values for top, right, bottom, and left:

 padding: 20px; padding: 10 12 18 8px; 




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net