Padding: Space Inside the Border

When you start learning HTML and CSS, your first web pages can feel a bit cramped. Text sticks to the edges, buttons look squished, and everything feels hard to read. One simple tool can fix a lot of this: padding.

In this article, you’ll learn what padding is, how to use it, and how to control it like a pro. You don’t need any previous coding experience—just curiosity and a basic text editor (like Notepad, VS Code, or any code editor you like).

By the end, you’ll be able to:

Make your text and boxes look cleaner and more readable
Add space inside elements (like buttons, cards, and sections)
Control padding on each side: top, right, bottom, and left

Let’s start with the big idea.

What Is Padding?

Imagine a birthday present:

The gift inside is your content (text, images, etc.)
The wrapping paper is the border
The soft stuffing between the gift and the wrapping is the padding

So, padding is the space between your content and its border.

In CSS (the language that styles your web pages), padding helps your elements “breathe.” It keeps text from touching the edges of a box, making things easier to read and nicer to look at.

Your First Padding Example

Let’s build a simple example so you can see padding in action.

Step 1: Create an HTML File

Open your text editor.
Create a new file and save it as padding-example.html.
Paste this code into the file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Padding Example</title>
  <style>
    .box-no-padding {
      border: 2px solid blue;  /* A blue border around the box */
      width: 250px;            /* Fix the width so it’s easy to compare */
    }

    .box-with-padding {
      border: 2px solid green; /* A green border around the box */
      width: 250px;            /* Same width as the first box */
      padding: 20px;           /* Add space inside the border */
    }
  </style>
</head>
<body>
  <h1>Padding Demo</h1>

  <div class="box-no-padding">
    This box has NO padding. See how the text touches the border?
  </div>

  <br><!-- A simple line break to add space between boxes -->

  <div class="box-with-padding">
    This box HAS padding. Notice the space between the text and the border.
  </div>
</body>
</html>

Step 2: View the Result

Open the file in your web browser (double-click it or right-click → "Open with" → your browser).
Look at the two boxes:
- The first box has no padding, so the text sits right against the border.
- The second box has padding: 20px;, so there is a comfortable gap inside.

Try it yourself: Change padding: 20px; to padding: 5px; or padding: 40px;. Save the file and refresh the browser. Watch how the inner space grows or shrinks.

You’ve just used padding—nice!

Understanding the Padding Shorthand

Right now, we used a simple version:

padding: 20px;

This means: add 20 pixels of padding on all four sides (top, right, bottom, left).

But what if you want different padding on each side? CSS lets you do that with more detailed options.

Option 1: One Value

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

Option 2: Two Values

padding: 10px 30px; 
/* top & bottom = 10px, left & right = 30px */

Option 3: Four Values

padding: 5px 10px 15px 20px;
/* top = 5px, right = 10px, bottom = 15px, left = 20px */

The order is always: top, right, bottom, left (think: TRouBLe).

Let’s practice this in a real example.

Example 2: Different Padding on Each Side

Replace the <style> section in your file with this:

<style>
  .box-equal-padding {
    border: 2px solid #333;   /* Dark gray border */
    width: 260px;
    padding: 20px;            /* Same padding on all sides */
  }

  .box-unequal-padding {
    border: 2px dashed #e91e63;  /* Pink dashed border */
    width: 260px;
    padding: 10px 20px 30px 40px; /* top, right, bottom, left */
  }
</style>

Then update the body like this:

<body>
  <h1>Padding Demo</h1>

  <div class="box-equal-padding">
    This box has equal padding on all sides (20px).
  </div>

  <br>

  <div class="box-unequal-padding">
    This box has different padding: 10px top, 20px right, 30px bottom, 40px left.
  </div>
</body>

Refresh your browser.

You’ll see that the second box is “pushed in” more on the left and bottom than on the top and right. That’s because we set each side’s padding separately.

Try it yourself:

Change padding: 10px 20px 30px 40px; to padding: 40px 30px 20px 10px;.
Refresh and notice how the text moves.

You’re now controlling padding like a designer.

Example 3: Individual Padding Properties

Sometimes, you only want to adjust padding on one side. CSS gives you special properties for that:

padding-top
padding-right
padding-bottom
padding-left

Let’s see them in action.

Update your <style> section again:

<style>
  .box-individual-padding {
    border: 2px solid #ff9800;  /* Orange border */
    width: 260px;

    padding-top: 30px;    /* Extra space above the text */
    padding-right: 10px;  /* Small space on the right */
    padding-bottom: 5px;  /* Tiny space below */
    padding-left: 10px;   /* Small space on the left */
  }
</style>

And in the <body>:

<body>
  <h1>Padding Demo</h1>

  <div class="box-individual-padding">
    This box uses padding-top, padding-right, padding-bottom, and padding-left.
  </div>
</body>

Refresh the page. Notice how there is a lot more space above the text because padding-top is 30px.

Try it yourself:

Change padding-bottom to 40px; and see how the box grows downward.
Set padding-left to 0; and notice the text moves closer to the left border.

This is a great way to fine-tune your layout.

Padding vs Margin (Quick Comparison)

You might hear about margin too, so let’s keep them straight:

Padding = space inside the border (between the border and the content)
Margin = space outside the border (between this element and other elements)

A quick memory trick:

Padding protects the content inside.
Margin makes space around the element.

You don’t have to master margin right now, but knowing the difference helps avoid confusion.

Example 4: Styling a Button with Padding

Let’s use padding to make a clickable button look nicer and easier to tap.

Update your file to include this CSS:

<style>
  .nice-button {
    background-color: #2196f3; /* Blue background */
    color: white;              /* White text */
    border: none;              /* No border line */
    padding: 10px 20px;        /* Top & bottom = 10px, left & right = 20px */
    cursor: pointer;           /* Show hand cursor on hover */
    font-size: 16px;           /* Slightly larger text */
  }
</style>

And in your <body>:

<body>
  <h1>Padding Button Demo</h1>

  <button class="nice-button">Click Me</button>
</body>

Open it in your browser. You’ll see a clean, friendly button. The padding makes it bigger and more comfortable to click.

Try it yourself:

Change padding: 10px 20px; to padding: 5px 10px; and see how the button shrinks.
Try padding: 15px 30px; to make it larger and more “important.”

You just styled a button using padding—that’s something you’ll do a lot in real projects.

Common Pitfalls (And How to Avoid Them)

As a beginner, it’s easy to run into a few padding problems. Here are some tips:

Elements suddenly get bigger
When you add padding, the total size of the element increases (unless you use a more advanced setting called box-sizing, which you can learn later). If a box suddenly gets wider or taller, check the padding.
Too much space inside
If something looks oddly spaced, inspect the CSS and look for padding values that are too large. Try smaller numbers like 5px or 10px.
You meant margin, not padding
If you want space between two elements, you probably want margin, not padding. If you want space inside a border, use padding.

Don’t worry if this feels confusing at first. With a bit of practice, your eyes will quickly spot the difference.

Quick Recap & What’s Next

You’ve learned a lot in a short time! Here are the key points:

Padding is the space inside the border, between the border and the content.
You can set padding with:
- One value: padding: 20px; (all sides)
- Two values: padding: 10px 30px; (top/bottom, left/right)
- Four values: padding: 5px 10px 15px 20px; (top, right, bottom, left)
You can also use padding-top, padding-right, padding-bottom, and padding-left for fine control.
Padding is different from margin: padding = inside, margin = outside.

Next steps:

Keep experimenting with different padding values and colors.
Try adding margin to your examples to see how it works with padding.
Start styling simple components (cards, headers, footers) and use padding to make them look clean and readable.

You’ve just taken a solid step into the world of CSS layout. Every clean, well-spaced website you admire uses padding—now you know how to use it too. Keep experimenting, and celebrate each small improvement in how your pages look!

Mudzinga

Padding: Space Inside the Border

What Is Padding?

Your First Padding Example

Step 1: Create an HTML File

Step 2: View the Result

Understanding the Padding Shorthand

Option 1: One Value

Option 2: Two Values

Option 3: Four Values

Example 2: Different Padding on Each Side

Example 3: Individual Padding Properties

Padding vs Margin (Quick Comparison)

Example 4: Styling a Button with Padding

Common Pitfalls (And How to Avoid Them)

Quick Recap & What’s Next

About Percy Mudzinga

Related Articles

Padding: Space Inside the Border

What Is Padding?

Your First Padding Example

Step 1: Create an HTML File

Step 2: View the Result

Understanding the Padding Shorthand

Option 1: One Value

Option 2: Two Values

Option 3: Four Values

Example 2: Different Padding on Each Side

Example 3: Individual Padding Properties

Padding vs Margin (Quick Comparison)

Example 4: Styling a Button with Padding

Common Pitfalls (And How to Avoid Them)

Quick Recap & What’s Next

About Percy Mudzinga

Related Articles

Never Miss an Update