What is Padding Used For in CSS?
The padding area of an element is the space between its content and its border. Padding adds extra space within an element. Margin, on the other hand, adds extra space around an element.
How to Work with Padding in CSS
CSS padding properties are used to provide space around an element’s content while staying within any established borders.
Remember:
- margin adds space outside an element border
- padding adds space inside an element border
Padding – Individual Sides
CSS allows you to specify padding for each side of an element:
- padding-top
- padding-right
- padding-bottom
- padding-left
Example:
div {
padding-top: 50px;
padding-right: 20px;
padding-bottom: 50px;
padding-left: 20px;
}
Padding – Shorthand Property
To simplify the code, all of the padding properties can be specified in a single property.
The padding property is a shorthand for the individual padding properties listed below:
- padding-top
- padding-right
- padding-bottom
- padding-left
So, here is how it works:
If the padding property has four values:
padding: 50px 25px 50px 25px;
- top padding is 50px
- right padding is 25px
- bottom padding is 50px
- left padding is 25px
4 values
Using 4 values applies the first to top, the second to right, the third to bottom, the fourth to left.
div {
padding: 50px 25px 50px 25px;
}
3 values
Using 3 values applies the first to top, the second to left & right, the third to bottom.
div {
padding: 25px 50px 75px;
}
2 values
Using 2 values applies the first to bottom & top, and the second to left & right.
div {
padding: 20px 10px;
}
1 value
Using a single value applies that to all the paddings: top, right, bottom, left.
div {
padding: 25px;
}
Values accepted
The following values can be assigned to all padding properties:
length – defines padding in px, pt, cm, and so on.
% – specifies padding as a percentage of the width of the containing element.
inherit – indicates that the padding should be passed down from the parent element.
Further reading
Want to dive deeper into this topic? Here you will find out more about CSS Padding | MDN.
If you liked this article, then please share. You can also find me on Twitter for more updates.