How to Add Padding in CSS

Use padding when you need space inside an element, between its content and its border. This is one of the most common ways to make buttons, cards, forms, and content blocks easier to read.

What you’ll build or solve

You’ll learn how to add padding in CSS using one value or side-specific values. You’ll also know when padding is the better choice instead of margin.

When this approach works best

This approach is the right choice when text or content sits too close to the edge of an element.

Common real-world scenarios include:

• Space inside buttons
• Better card readability
• Form field breathing room
• Content inside alerts or banners
• More comfortable mobile tap targets

This is a bad idea when the goal is space between separate elements. In that case, use margin instead.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add the padding property to the element

Use one value to apply the same inner spacing on all sides.

<div class="card">USA pricing</div>

<style>
  .card {
    padding: 20px;
  }
</style>

For directional spacing, switch to a side-specific padding rule.

<button class="cta">France pricing</button>

<style>
  .cta {
    padding-left: 24px;
    padding-right: 24px;
  }
</style>

What to look for:

• One value adds equal padding on all sides
• Use side-specific padding for precise control
• Padding creates space inside the element
• Larger padding improves tap targets for buttons
• Use margin instead for spacing between separate blocks

Examples you can copy

Card spacing

<div class="card">UK course plan</div>

<style>
  .card {
    padding: 24px;
  }
</style>

Button padding

<button class="cta">Start lesson</button>

<style>
  .cta {
    padding: 12px 24px;
  }
</style>

Form input spacing

<input class="email-input" placeholder="USA email">

<style>
  .email-input {
    padding: 10px;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using margin instead of padding

What the reader might do:

<div class="card">France pricing</div>

<style>
  .card {
    margin: 20px;
  }
</style>

Why it breaks: margin adds outside spacing, so the content still sits close to the border.

Corrected approach:

<style>
  .card {
    padding: 20px;
  }
</style>

Mistake 2: Adding padding to the wrong element

What the reader might do:

<section>
  <p>UK pricing details</p>
</section>

<style>
  p {
    padding: 20px;
  }
</style>

Why it breaks: the inner text moves, but the real visual container may still feel cramped.

Corrected approach:

<style>
  section {
    padding: 20px;
  }
</style>

Apply padding to the actual container that needs inner spacing.

Mistake 3: Using excessive padding values

What the reader might do:

.card {
  padding: 100px;
}

Why it breaks: large padding can make cards or buttons oversized, especially on smaller screens.

Corrected approach:

.card {
  padding: 24px;
}

Use balanced values that improve readability without wasting space.

Troubleshooting

If the space appears outside the element, switch from margin to padding.

If the wrong part moves, apply the padding to the correct container.

If the layout feels oversized on mobile, reduce large pixel values.

If buttons feel hard to tap, slightly increase vertical padding.

Quick recap

• Use padding for inner spacing
• One value applies to all sides
• Use side-specific values for control
• Use margin for spacing between blocks
• Keep padding balanced for readability and tap comfort