NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

HTML XHTML The Complete Reference
home » reference » appendix b » css1 / css2 properties

padding


The padding properties set the space between an element's border and its content. The padding property sets the padding for all four sides; the other four properties set the padding for specific sides. Values can be specified as specific values (pixels, points, and so on) or as a percentage of the element's overall width. The shorthand property is similar to margin. A single value creates equal padding on all sides. Up to four values can be used, in the following clockwise order: top, right, bottom, and left. Any missing value defaults to the value defined for the side opposite to it. However, unlike the margin property, the padding property cannot take negative values.

Examples


#div1 {border-style: solid; padding: 10px 20px 10px;}
#div2 {border-style: dashed; padding: 50px;}
#div3 {padding: 10px 20px;}

Browser and CSS Support Notes


CSS1
IE 4, 5, 5.5 (buggy), 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7


padding-bottom


This property sets the distance between an element's bottom border and the bottom of its contained content.

Example


#div1 {padding-bottom: 5px;}

Browser and CSS Support Notes


CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7


padding-left


This property sets the distance between an element's left border and the left edge of its content.

Example


#div1 {padding-left: 3em;}

Browser and CSS Support Notes


CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7


padding-right


This property sets the distance between an element's right border and the rightmost edge of its content.

Example


#div1 {padding-right: .5in;}

Browser and CSS Support Notes


CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7


padding-top


This property sets the distance between an element's top border and the top of its content.

Example


#div1 {padding-top: 25px;}

Browser and CSS Support Notes


CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7

(X)HTML Elements
CSS Properties
Back: overflow Next: page
< Home | About | Chapters | Examples | Errata | Reference | Site Map >