Loading...

CSS Padding

Margin pushes boxes apart. Often you also need room inside the box — so text does not stick to the border, and buttons feel easy to tap. That inner cushion is padding.

What is padding?

Padding is empty space between an element’s content and its border. It lives inside the border. Make padding larger, and the content sits farther from the edges while the box grows (unless you change box-sizing later).

Padding vs margin at a glance

These two are easy to mix up. Keep the jobs separate.

📊 Padding vs margin

Tool Where it sits Everyday job
padding Inside the border Cushion text, grow clickable area
margin Outside the border Separate this box from neighbors
Background Usually fills padding Color/image often covers the cushion
Vertical collapse Padding does not collapse Margins between stacked blocks may

Even padding on every side

Start with one length for a calm card.

Same padding on all sides

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* outer gap — different tool */
}

What you should notice

The text sits away from the gray border. The white background fills the padding area too — not only the letters.

Two values — vertical, then horizontal

Two lengths pair opposite sides: first is top and bottom; second is left and right.

Vertical then horizontal padding

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Four values — clockwise from the top

When each side needs its own cushion: top → right → bottom → left.

Four-sided padding shorthand

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Buttons love padding

Padding grows the comfortable hit area without changing the label text size. A short label with generous padding feels modern and easy to click.

Padded button

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

Background fills the padding

Unlike margin (outside), padding is still part of the element’s painted box. A background color or image usually covers the padding zone.

Colored padding zone

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

Try it yourself

  1. Build a card with padding: 16px and a visible border — confirm text is not stuck to the edge.
  2. Rewrite it as padding: 20px 12px and notice taller vs wider cushion.
  3. Style a button with horizontal padding larger than vertical.
  4. Give a teal banner large padding and a darker border — see the color fill the cushion.
  5. Place two cards with only margin between them, then try only padding inside one — feel the different jobs.

Common mistakes

  • Using padding to push boxes apart (that is margin’s job)
  • Expecting paddings between siblings to collapse like vertical margins (they do not)
  • Forgetting that background usually paints through the padding area
  • Huge padding on every side when a modest scale would read cleaner
  • Mixing up the four-value order (top, right, bottom, left)

Summary

  • Padding is inner space between content and border
  • Shorthand: 1, 2, or 4 values (clockwise from top for four)
  • Background usually fills the padding zone
  • Padding does not collapse the way vertical margins can
  • Buttons and cards rely on padding for comfort
  • Margin remains the outer cousin — keep both tools sharp

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial