HTML and CSS Reference
In-Depth Information
where each
padding
value is either a
length
,
percentage
,
auto
, or
inherit
value. As a
shorthand form, it is possible to set the four padding values (
padding-top
,
padding-right
,
padding-bottom
, and
padding-left
) independently with this property:
margin
border
padding-top
1
2
4
Content
padding-bottom
3
The
padding
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:
padding-top
,
padding-right
,
padding-bottom
, and
padding-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 5px;}
/* all sides different */
#div2 {border-style: dashed; padding: 50px;}
/* padding of 50px on all sides */
#div3 {padding: 10px 20px;}
/* top and bottom 10px and left and right 20px padding */
#div4 {padding: 5px 10px 15px;}
/* top 5px, right and left 10px and bottom 15px */
Compatibility
CSS 1, 2, 3 IE 4+ (buggy), 5+ Netscape 4+ (buggy), 6+, Firefox 1+ Opera 4+, Safari 1+
