Back
Next
The padding property in Cascading Style Sheets controls the distance between an elements
border and an elements content.
The below CSS Tutorial section gives a graphical representation of the padding property
| Syntax: |
padding: <value> |
| Possible Values: |
[ <length> | <percentage> ]{1,4} |
| Default Value: |
0 |
| Applies to: |
All elements |
| Inherited: |
No |
Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.
The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
The padding property is a shorthand for the padding-top, padding-right,
padding-bottom, and padding-left properties in CSS.
An element's padding is the amount of space between the border and the content
of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.
If four values are given, they apply to top, right, bottom, and left padding,
respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.
For example, the following rule sets the top padding to 2em, the right padding to 4em,
the bottom padding to 5em, and the left padding to 4em
Back
Next
|