CSS Padding Property: Complete Guide with Syntax and Examples

INTRODUCTION

Padding is the space between an element’s content area and its border. It adds space inside the element, pushing the content inward.

By default, an element has no padding. This means the content sits very close to the border. So, when you add a border to an element, it's a good idea to also add some padding to give the content some space.

CSS Box-Model

CSS padding property

The CSS padding property is used to set the padding on all four sides of an element at once.

The padding property can take one to four values, and each value can be a length value (like 10px, 2em) or a percentage.

Length Values - You can use any length unit like em, rem, px etc for padding. Also while using multi-value syntax you can use different units for different sides.

Percentage - When percent value is used for padding, the percentage is calculated with respect to the width of the parent element's content area. So percentage value may change if width changes.

CSS Padding order

As mentioned earlier padding property can be defined by using one, two, three, or four values. An easy way to remember order of sides is to imagine the sides in clockwise direction starting with top side. You can visualise by seeing the below diagram for reference.

• One value - Applies to all four sides
• Two values:
• First value → top and bottom
• Second value → left and right
• Three values:
• First value → top
• Second value → left and right
• Third value → bottom
• Four values: Applies in clockwise order: top, right, bottom, left
• First value → top
• Second value → right
• Third value → bottom
• Fourth value → left

padding: [all-sides];                         /* one value */

padding: [top and bottom] [left and right];   /* two values */

padding: [top] [left and right] [bottom];     /* three values */

padding: [top] [right] [bottom] [left];       /* four values */

padding: 20px;                /* 20px on top, right, bottom, left */                       

padding: 1em 5%;              /* 1em top & bottom, 5% left & right */

padding: 2rem 3vw 10px;       /* top: 2rem, left & right: 3vw, bottom: 10px */

padding: 10px 2em 5% 1rem;    /* top: 10px, right: 2em, bottom: 5%, left: 1rem */

Negative Padding

Negative padding is not allowed in CSS. The padding property defines the space between the content and the element’s border. It can only add space — not remove it. If you try to use something like (padding: -10px;), It will simply be ignored by the browser and reset to 0 (or fallback value).

Constituent properties

In CSS, the padding shorthand property is made up of four constituent (longhand) properties that control the padding on each individual side of an element. The constituent properties are listed below.

• padding-top - Controls the padding on top-side of element.
• padding-right - Controls the padding on right-side of element.
• padding-bottom - Controls the padding on bottom-side of element.
• padding-left - Controls the padding on left-side of element.

Padding on Inline elements

The CSS padding property can also be applied to inline elements. when you apply padding to top or bottom-side of inline element it will not increase/decrease the line-height of text.

Example: As can be seen in below example the word automobile is given an background-color of grey along with an top and bottom padding of 5px, but it has no effect on line height.

span{
    background-color: grey;
    padding-top: 5px;
    padding-bottom: 5px;

}

An <span>automobile</span> is a self-propelled vehicle designed for transporting people on roads. The <span>automobile</span> has revolutionized modern life by offering flexibility, convenience, and speed in travel. Whether it's a compact <span>automobile</span> for city use or a powerful SUV, the type of <span>automobile</span> someone chooses often reflects their lifestyle. 

The CSS padding property when applied to the right or left side of an element it will create an extra space after or before the element.

Example: As can be seen in below example the word automobile is given an background-color of grey along with an left and right padding of 10px, has created an extra space before and after the element.

span{
    background-color: grey;
    padding-left: 10px;
    padding-right: 10px;

}

An <span>automobile</span> is a self-propelled vehicle designed for transporting people on roads. The <span>automobile</span> has revolutionized modern life by offering flexibility, convenience, and speed in travel. Whether it's a compact <span>automobile</span> for city use or a powerful SUV, the type of <span>automobile</span> someone chooses often reflects their lifestyle. 

CSS Padding color

The padding property only creates space inside an element — between the content and the border. It doesn’t have its own color or any property to color it.

The padding area is affected by the element’s background-color. When you apply padding to an element and set a background-color, that background will fill both the content and the padding area.

CSS doesn't support targeting just the padding area directly, but you can use workarounds: You can use an inner wrapper to color just the padding area as shown in the below code.

<div class="outer">
  <div class="inner">Text</div>
</div>

.outer {
  padding: 20px;
  background-color: lightblue; /* Padding area */
 }

.inner {
  background-color: white; /* Content area */
 }

Frequently Asked Questions (FAQ)

box-sizing: border-box;

<div class="outer">
  <div class="inner">Text</div>
</div>

.outer {
  padding: 20px;
  background-color: lightblue;
}

.inner {
  background-color: white; /* Covers the content area */
}