CSS Padding
CSS padding properties are used to generate space within any defined border around the content of an element. With CSS, you have full control over the padding. There are properties for setting the padding on each side of an element (top, right, bottom, and left).
Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.
CSS Padding Properties
| S. No. | Property | Description |
| 1 | padding | It is used to set all the padding properties in one declaration. |
| 2 | padding-left | It is used to set left padding of an element. |
| 3 | padding-right | It is used to set right padding of an element. |
| 4 | padding-top | It is used to set top padding of an element. |
| 5 | padding-bottom | It is used to set bottom padding of an element. |
The following values can be used for all padding properties:
- length - specifies a padding in px, pt, cm, etc.
- % - specifies a padding in % of the width of the containing element.
- inherit - specifies that the padding should be inherited from the parent element.
Note: No negative values are permitted.
Example:
For all four sides of the <div> element the following example provides different padding:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightgray;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 70px;
}
</style>
</head>
<body>
<h2>Use individual properties of padding</h2>
<div>This div element has a top padding of 40px, a right padding of 20px, a bottom padding of 40px, and a left padding of 70px.</div>
</body>
</html>
</code>
</pre>
Output:
Use individual properties of padding
This div element has a top padding of 40px, a right padding of 20px, a bottom padding of 40px, and a left padding of 70px.
Padding - Shorthand Property
In order to shorten the code, all padding properties can be specified in one property. The padding property is a shorthand property for each single padding property:
- padding-top
- padding-right
- padding-bottom
- padding-left
So, it operates like this:
If there are four values for 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:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightgray;
}</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
Output:
The padding shorthand property - 4 values
This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.
If there are three padding values:
padding: 20px 45px 70px;
- top padding is 20px
- right and left paddings are 45px
- bottom padding is 70px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 20px 45px 70px;
background-color: lightgray;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 3 values</h2>
<div>This div element has a top padding of 20px, a right and left padding of 45px, and a bottom padding of 70px.</div>
</body>
</html>
Output:
The padding shorthand property - 3 values
This div element has a top padding of 20px, a right and left padding of 45px, and a bottom padding of 70px.
If there are two values in the padding property:
padding: 20px 45px;
- top and bottom paddings are 20px
- right and left paddings are 45px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 20px 45px;
background-color: lightgray;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 20px, and a right and left padding of 45px.</div>
</body>
</html>
Output:
The padding shorthand property - 2 values
This div element has a top and bottom padding of 20px, and a right and left padding of 45px.
If there is one padding property:
padding: 20px;
- all four paddings are 20px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 20px.</div>
</body>
</html>
Output:
The padding shorthand property - 1 value
This div element has a top, bottom, left, and right padding of 20px.
Padding and Element Width
The CSS width property indicates the width of the content area of the element. The area of content is the part of the padding, border and margin of an element (model box).
Therefore, if an element has a given width, then the padding of that item adds to the total width of the item.
This is often an unwanted outcome.
The <div> element is given a width of 200px in the following example. However, The actual rendering width of the element <div> is 250px. (200px + 25px of left padding + 25px of right padding):
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 200px;
background-color: yellow;
}
div.ex2 {
width: 200px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 200px wide.</div>
<br>
<div class="ex2">The width of this div is 250px, even though it is defined as 200px in the CSS.</div>
</body>
</html>
Output:
Padding and element width
This div is 200px wide.
The width of this div is 250px, even though it is defined as 200px in the CSS.
We can use the box-sizing property to maintain a width at 200 pixels regardless of the amount of padding. The element therefore maintains its width; the available space for content decreases if the padding is increasing. An example of this is:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 200px;
background-color: yellow;
}
div.ex2 {
width: 200px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 200px wide.</div>
<br>
<div class="ex2">The width of this div remains at 200px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>
Output:
Padding and element width
This div is 200px wide.
The width of this div remains at 200px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.