CSS Padding
Within any specified boundaries, padding is used to create space around an element’s content.
CSS Padding
Within any specified boundaries, space is created around an element’s content using the CSS padding attributes.
You have complete control over the padding when using CSS. Each side of an element can have its padding adjusted using attributes (top, right, bottom, and left).
Padding - Individual Sides
To specify the padding on either side of an element, use the values provided by CSS:
- padding-right
- padding-top
- padding-left
- padding-bottom
The following values are possible for each of the padding properties:
- length: The padding in pixels, points, centimeters, etc.
- % indicates that the padding should be inherited from the parent element.
- inherit – indicates that the padding should be inherited in percentage of the width of the contained element.
Note: You cannot enter negative values.
Example
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
It is possible to specify all of the padding properties in a single property, which will shorten the code.
The following specific padding properties can be summed up as the padding property:
- padding-bottom
- padding-left
- padding-top
- padding-right
Thus, this is how it functions:
If there are four values in the padding property:
- padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
Example
Use the padding shorthand property with four values:
div {
padding: 25px 50px 75px 100px;
}
If there are three values for the padding property:
- padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
Example
Use the padding shorthand property with three values:
div {
padding: 25px 50px 75px;
}
If the padding property has two values:
- padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
Example
Use the padding shorthand property with two values:
div {
padding: 25px 50px;
}
When the value of the padding property is one:
- padding: 25px;
- all four paddings are 25px
Example
Use the padding shorthand property with one value:
div {
padding: 25px;
}
Padding and Element Width
The width of the element’s content area is specified by the CSS width property. The region inside an element’s margin, padding, and border is called the content area (the box model).
Therefore, the padding that is applied to an element that has a given width will be added to the element’s overall width. This is frequently an unfavorable outcome.
Example
Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
width: 300px;
padding: 25px;
}
You can use the box-sizing property to maintain the width at 300px regardless of the amount of padding. As a result, the element keeps its real width; increasing the padding will result in less information being available.
Example
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
More Examples
Adjust the padding to the left.
This example shows you how to set a <p> element’s left padding.
Adjust the padding to the right.
This example shows how to properly configure a <p> element’s padding.
Adjust the padding to the top.
Setting a <p> element’s top padding is shown in this example.
Adjust the padding to the bottom.
This example shows you how to set a <p> element’s bottom padding.
All CSS Padding Properties
| 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 |
