Share this Page URL

Chapter 16. The Box Model: Styles for Di... > Cushy Content: Adding Padding to the... - Pg. 182

The Box Model: Styles for Dimensions, Borders, Margins, and More 182 If you look at the previous figure, you can see that the text tends to cozy right up against the border of the box, particularly on the left and right. If your text is feeling claustrophobic, you can give it some extra elbowroom by increasing the amount of padding that surrounds the content within the box. Style sheets give you four padding properties to play with: · padding-top--Adds space on top of the content. · padding-right--Adds space to the right of the content. · padding-bottom--Adds space below the content. · padding-left--Adds space to the left of the content. It's usually easiest to specify a value in pixels, like so: P {padding-left: 10px} There's also a shorthand property called padding that you can use to apply all four padding prop- erties, in this order: padding-top, padding-right, padding-bottom, and padding-left. (To remember this order, start at the top and work your way clockwise around the other sides.) Separate each property with a space, like so: DIV {padding: 10px 25px 10px 25px} Note that if you specify just a single value, it applies to all four padding sides. Here's some code (see sspaddng.htm on the CD in this book) that tries out each padding property on a few <DIV> sections. Figure 16.3 shows the result in Internet Explorer 6. <HTML> <HEAD>