CSS Padding Explained with Examples

padding in CSS-tutorial

Padding in CSS is the space between an element’s content and its border. It is used to create inner spacing inside an element.

What is Padding in CSS?

Padding controls the space inside the border of an HTML element.

It pushes the content inward, creating breathing space within the element.

Padding affects the element’s background area (unlike margin which is always transparent).

Syntax:

selector {
  padding: value;
}

value can be in units like px, em, %, etc.

Padding does not accept negative values.

Ways to Set Padding

1. Same Padding on All Sides

p {
  padding: 20px;
}

This applies 20px padding to the top, right, bottom and left sides.

2. Individual Padding for Each Side

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 60px;
  padding-left: 80px;
}

3. Shorthand Syntax

p {
  padding: 20px 40px 60px 80px;
}

This is interpreted as:

Top: 20px

Right: 40px

Bottom: 60px

Left: 80px

Example: Padding using Shorthand

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      background-color: greenyellow;
    }

    .padding {
      padding-top: 50px;
      padding-right: 100px;
      padding-bottom: 150px;
      padding-left: 200px;
    }
  </style>
</head>
<body>

  <p>This paragraph has no padding.</p>
  <p class="padding">This paragraph has padding on all sides.</p>

</body>
</html>

Output:

Padding Units

You can use different units for padding:

px – fixed pixels

em – relative to the font-size

% – relative to the parent container

Two Minute Drill

Use padding to control inner spacing inside an element.

Padding is great for improving readability, UI spacing, and layout control.

It works with background color, unlike margin.

Prefer shorthand syntax for clean code.