Padding

By the end of this lesson, you will be able to use CSS padding to create space inside an element between its content and its border, and choose the correct shorthand values for predictable layouts.

What it is

Padding is the transparent space inside an element's border. It surrounds the content area and pushes the border outward. Think of padding as the cushioning inside a box: the content sits in the middle, padding fills the space around it, and the border wraps the outside.

Related terms: content, border, margin, box-sizing, and the CSS box model.

Why it matters

• It makes buttons, cards, and form fields easier to click and read.
• It separates text from borders without adding extra wrapper elements.
• It helps create consistent spacing inside components.
• It can improve visual balance by giving content breathing room.
• It works with box-sizing: border-box to keep component sizes predictable.

Syntax or steps

The smallest useful pattern is the padding shorthand:

.box {
  padding: 12px 24px;
}

This sets vertical padding to 12px and horizontal padding to 24px. The shorthand follows the same order as margin: top, right, bottom, left. You can also set one side at a time:

.box {
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}

Example

Here is a realistic button example:

.button {
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid #333;
  background: #f7f7f7;
  font-size: 16px;
}

Part by part:

• display: inline-block lets the button accept padding while staying inline.
• padding: 10px 18px adds 10px above and below the text and 18px to the left and right.
• border is drawn outside the padding.
• The text is the content inside the padding.

Common mistakes

• Confusing padding with margin. Padding is inside the border; margin is outside it.
• Forgetting that padding increases an element's total width and height unless box-sizing: border-box is used.
• Using too many separate padding properties when a shorthand would be clearer.
• Applying padding to inline elements like <span> and expecting vertical space to affect layout; vertical padding may not push surrounding lines as expected.

When to use it

Use padding when you need space inside a component. Use margin when you need space between components.

Practice

Guided exercise: Create a card with a heading and paragraph. Add padding: 16px to the card and a 1px solid #ccc border. Expected result: the text should not touch the border.

Challenge: Change the padding to 8px 20px. What happens to the top and bottom space compared with the left and right space?

Solution hint: The first value applies to top and bottom; the second value applies to left and right.

Quick check

Question: If an element has padding: 5px 10px 15px 20px, what is the left padding?

Answer: 20px, because the four-value shorthand order is top, right, bottom, left.

Summary

Padding creates internal space between content and border, making elements more readable and clickable. Use it when the space belongs inside the component, and remember that it affects the element's total size unless box-sizing: border-box is applied.