| introduction ~ selectors ~ properties ~ advanced ~ real world CSS text style | text layout | background | border | margin | padding | page layout | element type | user interface | values |
 |
 |
 |
 |
padding properties
With cascading style sheets, any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:
padding-top, padding-left, padding-bottom, padding-right, padding
What it does
The padding properties set the size of the top, left, bottom, right and all paddings respectively.
Possible values
Padding can be specified as either a percentage, a length or using the keyword auto.
Padding can not take negative values. If you want to do this, you probably should be using the margin properties.
Percentages
A percentage padding value sets the affected padding to that percentage of the width of the parent element. For instance, a padding-right: 20% sets the width of the right padding to 20% of the width of the element which contains the element. This is true even for padding-top and padding-bottom.
Length values
We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the padding will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the padding will always be proportional to the calculated size of the content of the element. This is to be encouraged.
Default values
If no padding value is specified, the padding of an element is 0. That is, there is no space between the edge of an element and the contents of the element.
Is it inherited?
An element does not inherit the padding property of the element which contains it.
Hints and suggestions
Padding can be used to achieve similar effects to the positioning properties and margins.
Browser support
Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.
next: page layout properties
(C)1997-2001 Western Civilisation Pty. Ltd.