CSS Padding Property
The distance between the border and the content of an element is provided by the CSS padding attribute. It differs from a CSS margin in that the background color of the element on which padding is set has an impact; if you set the background color of an element, it will be visible through the padding area. Padding creates additional space within the element, whereas margin creates additional space around the element.
div {
padding: 50px;
border: 1px solid #ccc;
}
Padding Property
The space between an HTML element’s content and the border is managed by the CSS padding attribute. You may be familiar with the margin, which increases the area outside an element’s border; however, padding increases the area inside the element’s border. The top, right, bottom, and left padding properties are all independently editable. Using the shorthand property that you’ll learn about later in this blog, you can adjust all of the padding properties at once as well.
//Syntax
padding: size in px, %, inherit;
padding: 10px;
padding: 25%;The following values can be used to specify the padding properties: Specifies padding in rem, em, px, etc., and has a length. Percentage provides padding as a percentage of the width of the container element. inherit indicates that the padding must come from the parent element.
Example:
<div>Div with padding 0px</div>Output without padding property:
<div>Div with padding 80px</div>Output with padding property:
In the above example, you can see the div element with padding 0. There is not any space between the border and the div element. When we set padding 80px to the div element, you can see there is some space between the border and div element text.
Different padding properties
Different CSS padding properties may sometimes need to be specified for various sides. You may perform this by setting the padding property to the individual side, as seen below.
padding-left: 20px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 20px;
padding: 10px
Because it was set in the code snippet above in this manner, the padding in each of the four directions of the output image is different, as you can see. padding-left, which is used to provide an element left padding. padding-right, which is used to provide an element right padding. padding-top, which is used to give an element top padding. padding-bottom, which is used to give an element bottom padding. Padding simply used to provide padding to all directions simultaneously.
Padding Shorthand Property
If padding in all four directions is the same, the padding declaration can be used as a shorthand property instead of writing padding-right, padding-left, padding-top, and padding-bottom separately.
// Syntax
padding: value;
// Example
padding: 50px;
// It's same as
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;When the padding property has two values, the padding-top and padding-bottom of the element are affected by the first value, and the padding-left and padding-right are affected by the second value.
// Syntax
padding: top/bottom left/right;
//Example
padding: 30px 20px;
// it's same as
padding-top: 30px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;The first value is applied to padding-top, the second value is applied to padding-right and padding-left, and the third value is applied to padding-bottom if the padding property is given three values.
// Syntax
padding: top right/left bottom;
//Example
padding: 10px 25px 20px;
//It's same as
padding-top: 10px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 25px;The first value is applied to padding-top, the second to padding-right, the third to padding-bottom, and the fourth value is applied to padding-left if four values are supplied to the padding property.
//Syntax
padding: top right bottom left;
// Example
padding: 20px 35px 40px 55px;
// It's same as
padding-top: 20px;
padding-right: 35px;
padding-bottom: 40px;
padding-left: 55px;Conclusion
The distance between an element’s content and the border is defined by CSS padding. Padding: size in px or percent is the shortcut property to employ padding on all four sides, including the top, right, left, and bottom. A fixed value in pixels, a percentage, or an inherited value can all be used for the CSS padding property. The CSS padding property is not allowed to have negative values.
I hope this blog clears all your padding property-related problems. If you still have any questions or problems, then don’t forget to comment below.
Thank you for reading!
Written by: Vipin
