CSS Padding · Inner Space, Shorthand & the box-sizing Fix

The CSS Box Model · a quick reminder

Every HTML element is a rectangular box. That box has four layers:

┌─────────────────────────────────────┐
│              MARGIN                 │  ← Outside the element (space between elements)
│  ┌───────────────────────────────┐  │
│  │            BORDER             │  │  ← The visible edge/frame of the element
│  │  ┌─────────────────────────┐  │  │
│  │  │         PADDING         │  │  │  ← Space INSIDE the element, around content
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │      CONTENT      │  │  │  │  ← The actual text, image, or child elements
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

This lesson focuses entirely on the padding layer · the space between the content and the border.

Key distinction: Padding vs Margin

• Padding = space inside the element (between content and border) · part of the element itself; inherits the element's background colour
• Margin = space outside the element (between the border and neighbouring elements) · always transparent; shows the parent's background

Analogy: A cardboard box. The padding is the bubble wrap inside that protects the item · it is part of the box. The margin is the empty space on the shelf between boxes · it belongs to the surrounding environment.

What is padding?

CSS padding properties add space inside an HTML element · between the element's content and its border. This inner breathing room makes content easier to read, makes buttons comfortable to click, and makes cards look polished.

Why does it exist?

Without padding, every box of content would have text or images crammed right against its edges. Padding is the most direct way to create comfortable visual breathing room within an element without affecting the element's external spacing relationships.

How padding works · the four sides

An element has four sides: top, right, bottom, and left. You can control each side's padding independently using four individual properties:

element {
  padding-top:    value;
  padding-right:  value;
  padding-bottom: value;
  padding-left:   value;
}

What values can padding use?

⚠️ Important: Padding values cannot be negative. If you need to pull an element inward, that is a different problem solved with different properties. Negative values on padding are invalid.

padding-top

Sets the padding space above the content, between the top of the content and the top border.

Simple Example:

<style>
  p {
    padding-top: 50px;
    background-color: #def0ff;
    border: 2px solid #3399ff;
  }
</style>

<p>This paragraph has 50px of top padding.</p>

Expected Output: The paragraph text has a large 50px gap between the top border and the start of the text. The light blue background fills that gap · confirming the padding is inside the element.

Thinking Prompt: If padding is inside the element, the background colour fills the padding area. If you use margin-top instead, the space would be transparent (no background colour there). Try imagining the difference.

padding-right

Sets padding space to the right of the content.

p {
  padding-right: 30px;
  background-color: #def0ff;
}

Expected Output: A 30px gap appears between the right edge of the text and the right border of the paragraph. The background colour fills this gap.

padding-bottom

Sets padding space below the content.

p {
  padding-bottom: 40px;
  background-color: #def0ff;
}

Expected Output: A 40px gap appears between the last line of text and the bottom border of the element.

padding-left

Sets padding space to the left of the content.

p {
  padding-left: 80px;
  background-color: #def0ff;
}

Expected Output: The paragraph text is indented 80px from the left border. The background colour fills that left gap.

Example · All four sides set individually

<style>
  div {
    padding-top:    25px;
    padding-right:  50px;
    padding-bottom: 25px;
    padding-left:   50px;
    background-color: #fffbe6;
    border: 2px solid #f5a623;
  }
</style>

<div>
  This box has 25px top/bottom padding and 50px left/right padding.
</div>

Expected Output: The text has more horizontal breathing room (50px on each side) than vertical (25px on each side). The yellow background and orange border make the padding space clearly visible.

Real-World Comparison · Button with and without padding

Without padding (bad UX):

.btn {
  background-color: #007bff;
  color: white;
}

The button text would be cramped right against the edges · almost unreadable and very hard to click.

With padding (good UX):

.btn {
  background-color: #007bff;
  color: white;
  padding-top:    12px;
  padding-right:  24px;
  padding-bottom: 12px;
  padding-left:   24px;
}

The button now has comfortable click area, readable text with clear breathing room, and a professional appearance.

Writing all four padding-* properties individually works but is repetitive. CSS provides a shorthand property called padding that sets all four sides in one declaration.

Shorthand with 4 values

padding: top  right  bottom  left;

The order is clockwise starting from the top: Top → Right → Bottom → Left.

A memory trick: TRouBLe · Top, Right, Bottom, Left.

div {
  padding: 25px 50px 75px 100px;
}

• padding-top: 25px
• padding-right: 50px
• padding-bottom: 75px
• padding-left: 100px

Expected Output: The div has different padding on all four sides. The bottom has the most space (75px) and the top has the least (25px).

Shorthand with 3 values

padding: top  right-and-left  bottom;

When you give 3 values: the first is top, the second applies to both right and left, the third is bottom.

div {
  padding: 10px 30px 20px;
}

• padding-top: 10px
• padding-right: 30px
• padding-bottom: 20px
• padding-left: 30px ← same as right

Shorthand with 2 values

padding: top-and-bottom  right-and-left;

When you give 2 values: the first sets top and bottom together, the second sets right and left together.

div {
  padding: 20px 40px;
}

• padding-top: 20px
• padding-right: 40px
• padding-bottom: 20px ← same as top
• padding-left: 40px ← same as right

This is the most commonly used shorthand in real projects. It says: "Give me this much vertical padding and that much horizontal padding."

Shorthand with 1 value

padding: all-four-sides;

When you give 1 value, all four sides get the same padding.

div {
  padding: 20px;
}

• padding-top: 20px
• padding-right: 20px
• padding-bottom: 20px
• padding-left: 20px

Complete Visual Summary of Shorthand

/* 4 values: top | right | bottom | left */
padding: 10px 20px 30px 40px;

/* 3 values: top | right+left | bottom */
padding: 10px 20px 30px;

/* 2 values: top+bottom | right+left */
padding: 10px 20px;

/* 1 value: all four sides */
padding: 10px;

Thinking Prompt: Which shorthand would you use to create a button with 12px top/bottom padding and 24px left/right padding? (Answer: padding: 12px 24px;)

Side-by-Side Examples with Expected Outputs

Example A · Uniform card padding:

.card {
  padding: 24px;
  background-color: white;
  border: 1px solid #ddd;
}

Output: 24px of equal space on all four sides inside the card.

Example B · Navigation link padding:

nav a {
  padding: 14px 20px;
  display: inline-block;
  background-color: #2c3e50;
  color: white;
}

Output: Navigation links have 14px top/bottom spacing (making them taller and easier to click) and 20px left/right spacing (making them wider and more distinct).

Example C · Article content padding:

article {
  padding: 40px 60px 40px 60px;   /* or: padding: 40px 60px; */
  max-width: 800px;
}

Output: Article body content has generous horizontal padding (60px each side) to create a comfortable reading column, and vertical padding (40px) for top/bottom breathing room.

The critical problem you need to understand

This is one of the most confusing moments for beginners. Let's work through it carefully.

Suppose you create a <div> with a width of 300px and add some padding:

div {
  width:   300px;
  padding: 25px;
  background-color: lightblue;
}

Question: How wide is the div on screen?

Beginner's guess: 300px. Actual answer (by default): 350px · because the padding is added on top of the width!

Why does this happen?

By default, CSS uses a sizing model called content-box (the original CSS box model). In this model, the width property sets only the content area · it does not include padding or border. So when you add padding, the total rendered width becomes:

Total width = content-width + padding-left + padding-right + border-left + border-right
Total width = 300px + 25px + 25px + 0 + 0
Total width = 350px

Let's confirm this with a concrete example:

<style>
  div.box1 {
    width: 300px;
    padding: 25px;
    background-color: lightblue;
    border: 1px solid steelblue;
  }
</style>

<div class="box1">
  I am supposed to be 300px wide!
</div>

Expected Output: Despite width: 300px, the element visually measures 352px wide (300px content + 25px left padding + 25px right padding + 1px left border + 1px right border = 352px).

Why is this a problem? Imagine you are building a two-column layout where each column should be exactly 50% wide. If one column has padding added, it will overflow and break the layout, because its actual size exceeds 50%.

Visualising the problem

content-box model (default — padding ADDS to the width):

│←─── 25px ───→│←── 300px content ──→│←─── 25px ───→│
│   padding-left │      CONTENT         │  padding-right │
│←──────────────── TOTAL: 350px ──────────────────────→│

What is box-sizing?

box-sizing is a CSS property that controls how an element's total size is calculated · specifically, whether width and height refer to just the content area, or to the element's total rendered size including padding and border.

It has two values:

box-sizing: border-box · the solution

With border-box, the width you set is the final, total width of the element. CSS then automatically shrinks the content area to make room for padding and border inside that total width. Nothing is added outside.

<style>
  div.box2 {
    width: 300px;
    padding: 25px;
    background-color: lightblue;
    border: 1px solid steelblue;
    box-sizing: border-box;  /* ← the fix */
  }
</style>

<div class="box2">
  Now I am actually 300px wide!
</div>

Expected Output: The element is exactly 300px wide on screen. The padding (25px each side) and border (1px each side) are absorbed inside that 300px. The actual content area is shrunk to 300 - 25 - 25 - 1 - 1 = 248px · but the total element size is exactly 300px.

Visualising the fix

border-box model (padding INCLUDED in the width):

│← 25px →│←── 248px content ──→│← 25px →│
│  padding │      CONTENT          │ padding │
│←──────────── TOTAL: still 300px ─────────→│

Comparing content-box vs border-box side by side

/* CONTENT-BOX (default) — total size EXPANDS */
.box-content {
  width: 300px;
  padding: 25px;
  box-sizing: content-box;  /* default — no need to write this */
  /* Total rendered width: 300 + 25 + 25 = 350px */
}

/* BORDER-BOX — total size STAYS at 300px */
.box-border {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  /* Total rendered width: exactly 300px — padding is inside */
}

The universal border-box reset · standard professional practice

Because border-box is almost always what developers want and need, professional CSS always starts with this universal reset at the very top of the stylesheet:

*,
*::before,
*::after {
  box-sizing: border-box;
}

What this does: Applies border-box sizing to every single element on the page (including pseudo-elements). From this point forward, any width or height you set is the element's actual total size · padding and border are always included within that size, never added outside it.

This single rule eliminates the most common layout-breaking surprise in CSS. It is included in virtually every professional CSS project, every CSS framework (Bootstrap, Tailwind, etc.), and every CSS reset stylesheet.

Why not just use content-box?

Historically, content-box was the only option · it was the original CSS box model. But web developers universally found it counter-intuitive and layout-breaking. border-box was introduced specifically to fix this, and today it is universally preferred. The only reason content-box is still the default is to avoid breaking old websites that were built expecting the original behaviour.

Padding can also be set using percentage values. This makes an element's inner spacing responsive · it adapts proportionally as the screen or parent element resizes.

How percentage padding works

When you use a percentage value for padding (any side · top, right, bottom, or left), that percentage is always calculated as a percentage of the parent element's width · even for padding-top and padding-bottom.

div {
  padding: 5%;
}

If the parent element is 1000px wide, all four sides get 50px of padding (5% × 1000 = 50px). If the screen shrinks and the parent becomes 600px wide, the padding becomes 30px (5% × 600 = 30px).

Simple Example · Responsive card padding

<style>
  .container {
    width: 80%;
    background-color: #f0f0f0;
  }

  .responsive-card {
    padding: 5%;
    background-color: white;
    border: 1px solid #ddd;
  }
</style>

<div class="container">
  <div class="responsive-card">
    <p>This card's padding adjusts as the screen resizes.</p>
  </div>
</div>

Expected Output: On a wide screen, the card has generous padding. On a narrow screen (like a mobile phone), the padding shrinks proportionally. The layout breathes naturally at all screen sizes.

Important gotcha: Percentage padding and box-sizing

When using box-sizing: border-box with percentage padding, the padding is still calculated from the parent's width · but it is then included inside the element's own width. Everything still behaves predictably.

When to use percentage padding vs pixel padding?

Advanced: The "aspect ratio box" trick using percentage padding

One famous use of percentage padding is creating a responsive element that maintains a fixed aspect ratio. Since padding-top: 56.25% always equals 56.25% of the element's width, a div with zero height and padding-top: 56.25% will always maintain a 16:9 aspect ratio as it scales:

.video-wrapper {
  width: 100%;
  padding-top: 56.25%;  /* 9/16 = 56.25% — creates 16:9 ratio */
  position: relative;
  background-color: black;
}

This technique is used extensively for responsive video embeds and image placeholders in professional development.

Mistake 1 · Confusing padding and margin

Wrong thinking: "I need space between my card and the next card. Let me add padding."

Why it's wrong: Padding adds space inside the element. If you want space between elements, you need margin.

Correct thinking:

• Space inside an element (between content and border) → use padding
• Space outside an element (between this element and its neighbours) → use margin

/* WRONG — padding does not create space between elements */
.card {
  padding-bottom: 30px;   /* creates space inside the card at the bottom */
}

/* CORRECT — margin creates space between elements */
.card {
  margin-bottom: 30px;    /* creates space between this card and the next */
}

Mistake 2 · Forgetting box-sizing: border-box and being confused by element overflow

Wrong:

.two-columns .column {
  width: 50%;
  padding: 20px;
  float: left;
  /* No box-sizing — default content-box */
}

The two columns total: (50% + 40px) + (50% + 40px) = 100% + 80px → overflows the container and breaks to two rows.

Correct:

*,
*::before,
*::after {
  box-sizing: border-box;
}

.two-columns .column {
  width: 50%;
  padding: 20px;
  float: left;
  /* With border-box: total = 50% + 50% = 100% — perfect */
}

Mistake 3 · Using negative padding values

Wrong:

p {
  padding: -10px;   /* INVALID — CSS padding cannot be negative! */
}

Why it's wrong: Negative padding is not allowed in CSS. The browser ignores the declaration.

Correct: If you need to pull content inward or adjust positioning, use margin with negative values (which is allowed), or use position properties instead.

Mistake 4 · Getting the 4-value shorthand order wrong

Wrong (common confusion):

/* Thinking: left, right, top, bottom */
padding: 20px 30px 10px 5px;

Why it's wrong: Many beginners assume the order goes left-to-right or some other intuitive direction.

Correct · always clockwise from top:

/* Top | Right | Bottom | Left (clockwise) */
padding: 20px 5px 10px 30px;
/*       top   right bottom  left */

Memory aid: TRouBLe · Top, Right, Bottom, Left.

Mistake 5 · Forgetting that % padding is relative to the parent's WIDTH (not height)

Wrong assumption:

.box {
  height: 200px;
  padding-top: 10%;   /* You might expect 10% of 200px = 20px */
}

Reality: padding-top: 10% calculates as 10% of the parent's width, not the element's own height. If the parent is 600px wide, padding-top: 10% = 60px.

Correct understanding: All percentage padding values · even padding-top and padding-bottom · are calculated relative to the parent element's width. Keep this in mind when using percentage padding for vertical spacing.

Mistake 6 · Using padding to vertically centre text (it doesn't always work)

Wrong approach for centring:

.header {
  height: 60px;
  padding-top: 20px;   /* Trying to "eyeball" vertical centre */
}

Better approach:

.header {
  height: 60px;
  display: flex;
  align-items: center;   /* True vertical centring */
  padding: 0 20px;       /* Horizontal padding only */
}

Padding can help with spacing, but for true vertical centring, use flexbox align-items: center or line-height tricks.