CSS Padding

Padding in CSS adds space between an element’s content and its border. Think of it as inner spacing that keeps content from touching the edge.

What is Padding?

Padding is the internal gap between the content and the element’s edge.

Visual Tip:
Imagine a button. Padding controls how much space is around the text inside the button — not outside.

Basic Syntax

				
					selector {
  padding: value;
}

You can define padding in px, em, %, or rem.
This applies the same padding to all four sides: top, right, bottom, left.

Example 1: Equal Padding on All Sides

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      border: 2px solid teal;
      padding: 20px;
      background-color: #f0f8ff;
    }
  </style>
</head>
<body>
  <div class="box">Learn With Arshyan - Equal Padding</div>
</body>
</html>

Vertical & Horizontal Padding

You can also define vertical and horizontal padding separately using two values:

				
					selector {
  padding: vertical horizontal;
}

Example 2: Vertical and Horizontal Padding

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .notice {
      padding: 10px 40px;
      border: 1px dashed orange;
      background-color: #fff8e1;
    }
  </style>
</head>
<body>
  <p class="notice">This text has vertical (10px) and horizontal (40px) padding.</p>
</body>
</html>

Padding on Each Side

Use four values to control each side individually:

				
					selector {
  padding: top right bottom left;
}

Example 3: Padding on All Sides Differently

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .card {
      padding: 20px 30px 10px 50px; /* top, right, bottom, left */
      border: 2px solid #444;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <div class="card">Custom padding on each side!</div>
</body>
</html>

Inspecting Padding in Browser

Right-click the element.
Click Inspect.
View the Box Model under Computed Styles.
Hover over padding areas to see how space is applied.