This element has a padding of 70px.
CSS Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-toppadding-rightpadding-bottompadding-leftAll the padding properties can have the following values:
The following example sets different padding for all four sides of a <p> element:
p
{
padding-top
: 50px
;
padding-right
: 30px
;
padding-bottom
: 50px;
padding-left
: 80px
;
}
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual padding properties:
padding-toppadding-rightpadding-bottompadding-left
{
padding
: 50px 30px 50px 80px;
}
So, here is how it works:
If the padding property has four values:
If the padding property has three values:
If the padding property has two values:
If the padding property has one value:
Example
div.ex1 {
padding
: 25px 50px 75px 100px;
}
div.ex2 {
padding
: 25px 50px 75px;
}
div.ex3 {
padding: 25px
50px;
}
div.ex4
{
padding
: 25px;
}
Try it Yourself
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |