CSS · Module 15 · Lesson 9 of 48

Box Model & Padding

What is Padding?

Imagine you are shipping a delicate glass ornament inside a wooden crate. If the glass touches the hard wooden walls directly, it will scratch or break during transport. To protect it, you pack soft bubble wrap all around the ornament, creating protective interior spacing between the ornament (the content) and the crate walls (the border).

In CSS, Padding is this bubble wrap. It is the internal space between the actual content of an element (like text or an image) and its outer border. Adding padding increases the size of the element's background, creating breathing room inside the box.

Why does it matter?

Without padding, text inside buttons or cards would hug the borders directly, making the content look squished, unprofessional, and hard to read. Good padding is the secret to clean, modern, and high-end design layouts.

Syntax Breakdown

You can set padding on all sides at once, or configure individual sides:

padding: 20px; — Applies 20px of spacing to all four sides (top, right, bottom, left).

padding: 10px 20px; — Applies 10px to top/bottom, and 20px to left/right.

padding-top, padding-bottom, padding-left, padding-right — Sets padding for specific individual sides.

Padding Zone

Common Mistakes

Confusing padding and margin: Padding is *inside* the element's border, while margin is *outside* the border. If you want space between the background color and the text, use padding.

Using incorrect shorthand order: When using four values (e.g., padding: 10px 20px 30px 40px;), the browser reads them clockwise starting from the top: Top, Right, Bottom, Left (TRBL, like the word "Trouble").

Quick Reference

padding — Shorthand for all four directions.

padding-inline — Controls horizontal spacing (left and right).

padding-block — Controls vertical spacing (top and bottom).

Your Task

Apply `padding` of `20px` to the `.card` class.

index.html

Type code above to start the lesson.

Live Preview