You are currently viewing CSS Padding Property

CSS Padding Property

  • Post author:
  • Post category:CSS
  • Post comments:0 Comments

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;
CSS Padding Property

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.

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.


<div>Div with padding 0px</div>

Output without padding property:

CSS Padding Property
<div>Div with padding 80px</div>

Output with padding property:

CSS 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
CSS Padding Property

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.

How to add CSS to a Web page

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;

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;

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.

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;


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.

CSS Border Properties

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

Leave a Reply