CSS Padding Property with Examples
Padding in CSS is the amount of white space between the content and the border of its block element. In simple words, the space surrounding the content is called padding.
CSS provides various padding properties that allow us to create a space between the content of an element and its any border. We typically measure padding in pixels (px), ems (em), or percentages (%).
By default, the padding of an HTML element is set to 0px. This default setting means that content will appear at the edges of the border of the block element. To enhance the readability and visual appearance of your content, you can increase the padding.
The background color for the padding and content is always the same, meaning that the padding area takes the same background color as the content area.
The box model shown in the below figure has more padding between the content and its border than the default padding (i.e. 0px).
Note: Padding area of an element is a clickable whereas, margin area is not clickable.
Syntax to Define Uniform Padding in CSS
The general syntax to set padding for all four sides (top, right, bottom, and left) of a block element is as follows:
Selector {
padding: value; /* This applies the same padding to all four sides */
}
Example 1:
p {
padding: 20px;
}
In this example, we have set 20 pixels of padding on all four sides of the paragraph <p> element. This additional space will make the content easier to read and more visually appealing.
Individual Padding Properties in CSS
CSS provides specific properties by which we can also set padding individually for each side of a block element. These properties allow you to precisely control over the padding of each side of a block element.
[adinserter block=”5″]
The individual padding properties in CSS to set padding for each side is as follows:
- padding-top: Sets the padding on the top side of the element.
- padding-right: Sets the padding on the right side of the element.
- padding-bottom: Sets the padding on the bottom side of the element.
- padding-left: Sets the padding on the left side of the element.
To set padding individually for each side of a block element, use the following syntax:
Selector {
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}Example 2:
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}In this example, we have set different padding for all four sides of a <div> element.
Shorthand Padding Property
We can use the shorthand padding property to define different padding values for each side of a block element in one line. The values are specified in a clockwise order, starting from the top. The shorthand syntax to define padding in CSS is as:
element {
padding: top right bottom left; /* Clockwise from the top */
}
The use of shorthand notation reduces the amount of code, making it easier to read and maintain. It also saves space in the style sheet by combining multiple property values into one line.
Setting Equal Padding on All Sides
If the padding property has one value, it will set equal padding on each side of a block element.
Example 3:
div {
padding: 20px;
}In this example, we have set 20 pixels of equal padding on the top, right, bottom, and left sides of <div> element.
Setting Different Padding for Each Side
If the padding property has two values, it will set the first padding value on top and bottom, while the second padding value on the right and left.
Example 4:
div {
padding: 40px 20px;
}In this example, we have set 40 pixels of padding on the top and bottom, and 20 pixels on the right and left sides of a <div> element.
If the padding property has three values, it will set the first padding value to the top, the second padding value to right and left, while the third value will set to the bottom side.
[adinserter block=”2″]
Example 5:
div {
padding: 10px 20px 30px;
}
In this example, we have set 10 pixels on the top, 20 pixels on the right and left and 30 pixels on the bottom sides of a <div> element.
Example 6:
div {
padding: 10px 20px 30px 40px;
}
In this example, we have set 10 pixels on the top, 20 pixels on the right, 30 pixels on the bottom and 40 pixels on the left sides of a <div> element.
Values for Padding Properties in CSS
1. Length: The length value allows you to set a specific padding using various units of measurement. Common units include:
- Pixels (px): A fixed unit commonly used in web design.
- Points (pt): Generally used in print media.
- Centimeters (cm): A physical measurement unit.
- Ems (em): Relative to the font size of the element.
- Rems (rem): Relative to the font size of the root element.
2. Percentage (%): The percentage value sets the padding as a percentage of the width of the containing element or browser window. It makes the padding to be responsive to the size of the container.
Example 7:
div {
padding: 10%; /* Set padding to 10% of the container's width */
}
3. Inherit: The inherit value specifies that the padding should be inherited from the parent element. This means that the element will take the same padding values as its parent element.
Example 8:
p {
padding: inherit; /* Inherit the padding from the parent element */
}
Note:
(1) By default, the value of the padding property is not inherited automatically. This means that if the <body> element has a padding property with a value of 40 pixels, this will not automatically apply to all other block elements inside it.
(3) You must specify padding for each block-level element that needs to use. If you want an element to inherit the padding value from its parent, you use the inherit value.
(2) Padding properties do not accept negative values. Attempting to use a negative value will either be ignored or cause an error in the rendering of the element.
Example 9:
<!DOCTYPE html>
<html>
<head>
<title>Padding Values Example</title>
<style>
.box-length {
padding: 20px;
background-color: white;
border: 1px solid #ccc;
}
.box-percentage {
padding: 10%;
background-color: #e0e0e0;
border: 1px solid #bbb;
}
.parent-box {
padding: 20px;
background-color: #d0d0d0;
border: 1px solid #aaa;
}
.child-box {
padding: inherit;
background-color: white;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="box-length">
This box uses the length value 20px for padding.
</div>
<div class="box-percentage">
This box uses the percentage value 10% for padding.
</div>
<div class="parent-box">
Parent box uses 20px of padding.
<div class="child-box">
Child box inherits padding 20px from the parent.
</div>
</div>
</body>
</html>
Output:
Using Percentages for Responsive Padding
For a responsive design, you can use relative units like percentages or ems for CSS padding. When you use percentages for padding, the padding size is relative to the width of the containing element or browser window. This is especially useful for creating responsive layouts that could adjust well to different screen sizes. Let’s take an example on it.
Example 10:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Padding with Percentages</title>
<style>
.container {
padding: 5%;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
This container has padding 5% of its width.
</div>
</body>
</html>
In this example, the div with the class container has padding that is 5% of its width, making the padding responsive and allows it to change according to the container’s size.
Using Ems for Responsive Padding in CSS
When you use ems unit for padding in CSS, the padding size is relative to the font size of the element. It is especially useful when you want the padding scales with text size, which maintains the consistent spacing relative to the content.
Example 11:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Padding with Ems</title>
<style>
.text-box {
font-size:20px
padding: 2em;
background-color: #e0e0e0;
border: 1px solid #bbb;
}
</style>
</head>
<body>
<div class="text-box">
This box has padding that is 2 times the font size.
</div>
</body>
</html>
In this example, the div with the class text-box has padding that is 2 times the font size, ensuring that the padding scales proportionally with the text.
Padding and Element Width
The width property provided by CSS defines the width of the content area of an HTML element. If a width is specified for an element or box, the padding added to that element will add to the total width of the element. It often gives an undesirable result. Let’s take an example based on this concept.
Example 12:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding and Element Width Example</title>
<style>
.container1 {
width: 400px; /* Sets the width to 400 pixels */
background-color: red;
border: 1px solid #ccc;
}
.container2 {
width: 400px; /* Sets the width to 400 pixels */
padding: 20px; /* Sets the padding to 20 pixels on all sides */
background-color: green;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container1">
This container has a width of 400 pixels with no padding.
</div>
<div class="container2">
This container has a width of 400 pixels and padding of 20 pixels on all four sides.
</div>
</body>
</html>
Output:
In this example, the first div element with class container1 is set to 400px width. This div element has no padding. On the other hand, the second div element with class container2 is set to the width of 400px and padding 20px for all sides.
As you can see in the above output, the width of the second div element is bigger than the width of the first div element. This is because the width of the second div element is 440px (width of 400px + 20px of left padding + 20px of right padding).
CSS Box-Sizing Property
To fix the width of an element, no matter the amount of padding, we can use the box-sizing property provided by CSS. With this property, we can maintain the actual width of an element, whether padding is included or not. If we increase the padding, the available content space will adjust to fit within the specified width of the element. Thus, the total width of the element will remain constant.
Example 13:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding and Element Width with Box-sizing Property</title>
<style>
.container1 {
width: 400px;
background-color: red;
border: 1px solid #ccc;
}
.container2 {
width: 400px;
padding: 20px;
background-color: green;
border: 1px solid #ccc;
}
.container3 {
width: 400px;
padding: 20px;
background-color: yellow;
box-sizing: border-box; /* Padding and border are included in the total width */
}
</style>
</head>
<body>
<div class="container1">
This container has a width of 400 pixels with no padding.
</div>
<div class="container2">
This container has a width of 400 pixels and padding of 20 pixels on all four sides.
</div>
<div class="container3">
This container has a fixed width of 400 pixels, including padding in this width.
</div>
</body>
</html>Output:
Thus, we can control the actual width of an element by using the box-sizing property, regardless of the amount of padding. The total width of an element remains fixed, and the content space adjusts to fit within the specified width.
Non-Collapsing Padding in CSS
In CSS, padding area of an element does not collapse. The padding always adds the specified space between the element’s content and its defined border. It does not interact or combine with padding or margins of other elements. Let’s take an example based on non-collapsing padding concept.
Example 14:
<!DOCTYPE html>
<html>
<head>
<title>Non-Collapsing Padding Example</title>
<style>
.element {
padding: 20px;
background-color: lightgreen;
}
.inner-element {
padding: 10px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="element">
Outer Element
<div class="inner-element">Inner Element</div>
</div>
</body>
</html>
Output:
In this example, the div element with class ‘element’ has a padding of 20px, and the div element with class ‘inner-element’ has a padding of 10px. Both padding values are maintained consistently. They do not collapse or combine. The inner-element will have 10px padding inside its border, while the element will have 20px padding inside its border.
