CSS
CSS Padding
CSS Padding is used to add space between an element’s content and its border. Each side of the content, such as top, bottom, left, and right, can be controlled individually using specific properties. Note that padding values should never be negative.
Padding properties can take the following values:
- Length: Sets the padding using fixed units like px, em, cm, etc.
- Percentage (%): Determines the padding value as per the element’s width.
- Inherit: Applies the padding value from the parent element.
.box {
background-color: lightblue;
padding: 20px;
}
.box2 {
background-color: lightgreen;
padding: 10%;
}
.container {
padding: 30px;
}
.child {
background-color: lightcoral;
padding: inherit;
}Padding Property
The space inside an element, between its content and the border, is known as padding. It provides extra spacing within the element and can be set individually for each side (top, bottom, left, and right) using shorthand or separate properties.
Shorthand Padding Property
To shorten the code, define all the properties in one property, i.e., for top, left, right, and bottom.
If the padding property has four values:
padding:20px 15px 10px 5px;
- top padding is 20px
- right padding is 15px
- bottom padding is 10px
- left padding is 5px
If the padding property has three values:
padding:10px 15px 20px;
- top padding is 10px
- right and left padding is 15px
- bottom padding is 20px
If the padding property has two values:
padding:15px 5px;
- top and bottom padding are 15px
- right and left padding are 5px
If the padding property has one value:
padding:15px;
- all four paddings are 15px
.one-value {
padding: 15px;
}
.two-values {
padding: 15px 5px;
}
.three-values {
padding: 10px 15px 20px;
}
.four-values {
padding: 20px 15px 10px 5px;
}Padding and Element Width
To set the width of the content area of an element, the CSS width property can be used. Remember, this does not include padding, borders, and margins. If an element has a specific width, adding any padding property will increase the width, resulting in unexpected results.
.box {
width: 200px;
padding: 20px;
background: lightblue;
border: 1px solid blue;
}In the following example, the <div> is assigned a width of 350px, but due to 20px padding on both the left and right sides, the total rendered width becomes 390px.
.box {
width: 350px;
padding: 20px;
background-color: lightblue;
border: 1px solid blue;
}You can use the box-sizing property to keep the width specific at 350px. This will not change the width size, no matter the amount of padding.
.box {
width: 350px;
padding: 20px;
box-sizing: border-box;
background-color: lightblue;
border: 1px solid blue;
}Padding in CSS is used to add space inside an element, between the content and its border. It can be set for each side or all at once using shorthand. Using the box-sizing property can help keep the element size fixed. Padding makes layouts cleaner and easier to read.
