CSS - Paddings

CSS padding is used to create extra space between the border of the element and its contents. In this chapter we will learn different types of padding and properties associated with it.

What is CSS Padding?

In CSS , padding is a property that is used to create additional spacing inside the boundary of an element. The default value for padding is zero. A padding value of zero indicates that content (mostly text content) will start from the border of the element itself.

CSS Padding Example

You can try different ways to use to create padding in the below section and you can change the values as well.

Define Padding

To define any padding on any HTML element , you can use the CSS padding property . This property is shorthand property of ‘padding-top’ , ‘padding-right’ , ‘padding-bottom’ , and ‘padding-left’ properties. A single value will generate padding all around the element.

Syntax

padding: "value";

Example

In this example, we have generated 5px padding surrounding the paragraph element and highlighted the padding area with the light-green background.

CSS Individual Padding Properties

As we have mentioned earlier the padding is a shorthand property for all Individual sides padding. You can set different padding values for the top, right, bottom, and left sides.

• padding-top : This property is used to set the top padding of any element.

• padding-right : This property is used to set the right padding of any element.

• padding-bottom : This property is used to set the bottom padding of any element.

• padding-left : This property is used to set the left padding of any element.

You can check the attached image for more clarity on individual side paddings.

Syntax

The syntax for the CSS individual padding properties is as follows:

padding-top: "value";

padding-right: "value";

padding-bottom: "value";

padding-left: "value";

Example

In this example, we have created four different elements and generated padding on each element’s individual sides with the above-mentioned properties.

All the leftover space on the right side of the element can be confusing to identify the padding, if you try on your own by changing values it will clear the padding concept. Always remember negative values are not allowed for padding in CSS.

CSS Padding Shorthand Property

There are four ways to provide value to the CSS padding property all of them are mentioned and described below with the complete example code.

• Single Values: Here you can provide a single value to the padding property that same value will be applicable on four sides of the the element.

• Two Values: For two values, the first value(10px) represents the top and bottom padding while the second value(20px) represents the left and right padding. For example - padding: 10px 20px;

• Three Values: For three values, the first value(10px) represents the top padding, the second value(15px) represents the left and right padding, and the third value(20px) represents the bottom padding. For example - padding: 10px 15px 20px;

• Four Values: For four values, the first value(5px) represents the top padding, the second value(10px) represents the right padding, the third value(15px) represents the bottom padding, and the fourth value(20px) represents the left padding. For example - padding: 5px 10px 15px 20px;

Syntax

The syntax for the padding with single, double, triple, and four values is as follows:

padding: "value" // Single Value

padding: "value value" // Two Values

padding: "value value value" // Three Values

padding: "value value value value" // Four Values

Example

In this example, we have set the padding property of paragraph element with single, double, triple and four values.

Padding Mix up Units

CSS does not restrict the usage of multiple units for specifying the padding value while specifying the shorthand property. That means the length value can be passed as pixels along with ems or inches, etc.

Syntax

The syntax of padding property value with mix-up units is as follows:

h2 {

    padding: 20px 4ex .5in 3em; 

}

Example

In this example, we used different units to specify the padding value.

Using padding With Percentage Value

The padding property can be used with a percentage value. The percentages are calculated in relation to the width of the parent element’s content area.

Example

In this example, we have used a percent value with a padding property to set the padding of the paragraph element.

Padding Properties Reference

You can explore more examples of padding properties by visiting the sub-topics listed in the following table: