CSS padding Property

What You’ll Learn

The padding property adds space inside an element, between its content and its border. It is a core box-model tool for readable layouts, buttons, cards, and any component that needs breathing room.

Introduction

The padding property in CSS is used to generate space around an element’s content, inside of any defined borders. This space is often used to enhance the layout and overall design of a webpage, providing better readability and visual aesthetics.

The padding property can be applied to all HTML elements and can be set using various units like pixels, ems, percentages, and more.

Definition and Usage

Apply padding to any element that needs inner spacing: divs, paragraphs, buttons, links, cards, and form fields. Use single-value shorthand for equal spacing on all sides, two values for vertical and horizontal rhythm, or longhand side properties when each edge needs a different amount.

Padding increases the visible size of an element’s background and border box. Unlike margin, padding never collapses and always stays inside the element’s border.

📝 Syntax

The syntax for the padding property can be written in several ways, depending on which sides of the element you want to specify padding for:

element {
  padding: value; /* Applies to all four sides */
  padding-top: value;
  padding-right: value;
  padding-bottom: value;
  padding-left: value;
}

The value can be a length (like 10px, 1em, etc.), a percentage, or the keyword auto.

Shorthand Rules

• Single value — Applies the same padding to all four sides.
• Two values — First applies to top and bottom; second to left and right.
• Three values — First to top; second to left and right; third to bottom.
• Four values — Top, right, bottom, left (clockwise).

Basic Example

.padded-box {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

🎯 Default Value

The default value of the padding property is 0, meaning no padding is applied by default. Browsers may apply their own default padding to certain elements like <button> or <ul>, which you can reset or override with CSS.

💎 Property Values

Examples Gallery

Apply uniform padding to a box, use two-value shorthand, set individual sides with longhand properties, and style button and card UI with comfortable inner spacing.

<style>
  .padded-box {
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
</style>

<div class="padded-box">
  This box has 20px of padding on all sides.
</div>

.note {
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.custom-pad {
  padding-top: 8px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 32px;
  background: #dbeafe;
  border: 2px solid #2563eb;
}

.card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

.btn {
  padding: 0.6rem 1.25rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
}

padding vs margin & side properties

Padding and margin are both spacing tools in the CSS box model, but they work in opposite directions. Use margin for outer spacing between elements. Use padding for inner spacing between content and the border.

The padding shorthand sets all four sides at once. When you need per-edge control, use padding-top, padding-right, padding-bottom, and padding-left. For logical writing-mode spacing, see padding-block next in the series.

/* Box model layers: content → padding → border → margin */
.card {
  padding: 1rem;       /* inside the border */
  margin: 1.5rem;      /* outside the border */
  border: 1px solid #e2e8f0;
}

/* Longhand side override */
.icon-label {
  padding: 0.5rem 1rem;
  padding-left: 2.5rem;
}

Padding in the Box Model

Every element is drawn as a box with these layers from inside out:

• Content — the text, image, or child elements.
• Padding — space inside the border around the content.
• Border — the visible edge of the box.
• Margin — transparent space outside the border that separates this box from others.

♿ Accessibility

• Size touch targets — Buttons and links need enough padding so they are easy to tap on mobile devices.
• Improve readability — Text blocks benefit from padding so lines do not touch container edges.
• Do not hide content — Very large padding on small screens can push important content out of view.
• Keep focus visible — Padding adjusts inner spacing; it should not replace visible focus outlines on interactive elements.
• Test zoomed layouts — Users who zoom in rely on comfortable padding to keep text readable.

💡 Best Practices