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
