What is Padding in CSS: Simple Explanation and Examples

In CSS, padding is the space inside an element, between its content and its border. It creates breathing room around the content without changing the element's border or margin.

How It Works

Think of padding like the cushion inside a picture frame. The frame is the border, the picture is the content, and the padding is the soft space that keeps the picture from touching the frame directly. Padding adds space inside the element, pushing the content away from the edges.

This space is part of the element's box but does not affect the space outside the border. Padding can be set equally on all sides or individually for top, right, bottom, and left, giving you control over how much space surrounds your content.

Example

This example shows a box with padding around the text. The padding creates space inside the box, so the text doesn't touch the edges.

css

div {
  border: 2px solid #4CAF50;
  padding: 20px;
  width: 200px;
  background-color: #e8f5e9;
  font-family: Arial, sans-serif;
}

Output

A green-bordered box 200px wide with light green background and text inside that has 20px space from the border on all sides.

When to Use

Use padding when you want to create space inside an element to improve readability and design. For example, adding padding inside buttons makes the text easier to click and looks nicer. Padding is also useful inside cards, forms, and containers to separate content from borders.

Unlike margin, which controls space outside the element, padding keeps the space inside, so it affects the element's background and border area.

Key Points

• Padding adds space inside an element, between content and border.
• It can be set for all sides or individually (top, right, bottom, left).
• Padding affects the element's size and background area.
• It improves layout by preventing content from touching edges.
• Use padding to enhance readability and clickable areas.

Key Takeaways

Padding creates space inside an element between its content and border.

It helps make content more readable and visually balanced.

Padding can be set uniformly or on each side separately.

Unlike margin, padding affects the element's background and size.

Use padding to improve design and user experience.