CSS Padding

In the last lesson you learned about CSS Margin. Margin is the space outside a box. Now let’s look at padding. Padding is the space inside a box.

🎁 What is Padding?

Padding is the empty space between the content of a box and its edge. So if you have some text inside a box, padding is the gap between that text and the box border.

Think of a gift box. You put a small item inside. But you don’t want it banging on the sides. So you add some soft paper around it. That soft paper keeps the item away from the walls of the box. Padding does the same thing. It pushes the content away from the edges, so things don’t feel cramped.

Margin and padding sound similar, so let’s keep them clear in your head.

• Margin is the space outside the box. It pushes other boxes away.
• Padding is the space inside the box. It pushes the content away from the box edge.

🤔 Why do we need padding?

Without padding, your text touches the edge of the box. It looks tight and hard to read. Now think about real things you use every day.

• On a YouTube button, the word “Subscribe” is not stuck to the button edge. There is some room around it. That room is padding.
• In a WhatsApp chat bubble, your message is not glued to the bubble border. The small space inside the bubble is padding.
• On an Amazon “Add to Cart” button, the text sits nicely in the middle with space around it. Again, padding.

So padding makes things look clean and easy to tap or read. That space is called breathing room, and good design needs it.

🧩 The syntax

You add padding with the padding property. You give it a size, usually in pixels like 20px.

Here is the simplest way. This adds the same space on all four sides of the box.

.box {
  padding: 20px;
}

This means 20 pixels of space on the top, right, bottom, and left. All four sides get the same gap.

But sometimes you want a different space on each side. So CSS lets you set each side on its own.

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

You can read each line easily. padding-top is the space at the top. padding-left is the space on the left. And so on for the rest.

✍️ The shorthand

Writing four lines is fine, but it gets long. So CSS gives you a short way to set all sides in one line. This is called the shorthand, which just means one short line that does the work of many.

When you give padding more than one value, the order matters. The order goes clockwise, starting from the top.

Here is a nice trick to remember the four-value order. Start at the top and move like a clock: top, right, bottom, left. Many people say “TRouBLe” (Top, Right, Bottom, Left) to keep the order in mind.

👀 A simple example

Let’s make a box with text and give it padding. First the HTML.

<div class="card">
  Hello! I have nice space inside me.
</div>

Now the CSS. We give the box a background color so you can actually see the padding. Then we add padding inside.

.card {
  background-color: lightblue;
  padding: 30px;
}

Here the box gets a light blue background. The padding: 30px; adds a 30 pixel gap inside, all around the text.

🛒 A real example: a button

Buttons are the best place to see padding work. A button with no padding looks tiny and is hard to tap. Let’s fix that.

This makes a real-looking button with comfortable space around the text.

.btn {
  background-color: #ff4500;
  color: white;
  padding: 12px 24px;
  border: none;
}

Let’s walk through it. The padding: 12px 24px; is the important part here. It gives 12 pixels of space on the top and bottom, and 24 pixels on the left and right. So the button is wider than it is tall, which is exactly how most buttons look.

⚠️ Common Mistakes

A few small things trip up beginners. Watch out for these.

• Mixing up padding and margin. Padding adds space inside the box, around the content. Margin adds space outside, between this box and others. So if your text feels cramped, you want padding.
• Forgetting the side order in shorthand. padding: 10px 20px; is top and bottom first, then left and right. It is easy to read it the wrong way. So go slow at first.
• Padding making the box bigger than you expect. By default, padding adds to the total width of the box. So a 200px box with 20px padding becomes 240px wide. You will learn a clean fix for this called box-sizing in a later lesson.

✅ Best Practices

Here are some simple habits that keep your padding clean.

• Use the shorthand when you can. padding: 12px 24px; is shorter and clearer than four separate lines.
• Give buttons and cards enough padding so the text has room. Cramped text is hard to read.
• Try to use the same padding values across your page. Reusing values like 8px, 16px, and 24px makes everything look neat and even.

🧩 What You’ve Learned

You now know how to add space inside a box. Here is a quick recap.

• ✅ Padding is the empty space inside a box, between the content and the edge.
• ✅ Margin is outside the box. Padding is inside the box.
• ✅ padding: 20px; adds equal space on all four sides.
• ✅ You can set each side with padding-top, padding-right, padding-bottom, and padding-left.
• ✅ The shorthand follows clockwise order: top, right, bottom, left (“TRouBLe”).
• ✅ Padding can add to the total width of the box, so keep that in mind.

🚀 What’s Next?

Next you will learn about the line that goes around your box, and how to style it.

CSS Border