Author: Michal Szymanski
CSS Padding
The CSS padding
properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
.padding-example {
padding: 60px;
}
<p class="padding-example">
This element has a padding of 60px on each side
</p>
Live preview
This element has a padding of 60px on each side
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
The following example sets different padding for all four sides of a <p> element:
.padding-example-2 {
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
}
<p class="padding-example-2">
This element has a different padding on each side
</p>
Live preview
This element has a different padding on each side
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in one property.
So, here is how it works:
If the padding
property has four values:
- padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
p {
padding: 25px 50px 75px 100px;
}
Previous lesson Next lesson
Spread the word: