CSS padding-right Property

What You’ll Learn

The padding-right property sets inner spacing on the right edge of an element. It controls spacing inside the box so content does not touch the right border directly.

Introduction

The padding-right property in CSS is used to define the space between the content of an element and its right border.

This property allows you to control the inner spacing, enhancing the readability and visual appeal of your webpage by ensuring that the content does not touch the borders directly.

Definition and Usage

Apply padding-right when you need extra room to the right of the content inside an element — for example, making room beside a close icon, offsetting text in a toolbar, or adding space inside a card before the right border.

Like all padding properties, padding-right increases the visible size of an element’s background and border box. It never collapses and always stays inside the element’s border.

📝 Syntax

The syntax for the padding-right property is straightforward. You can specify the padding using various units like pixels, ems, percentages, and more.

element {
  padding-right: value;
}

Here, value can be a length, percentage, or the keyword auto.

Basic Example

.box {
  padding-right: 20px;
  border: 1px solid black;
  background-color: lightgray;
}

Syntax Rules

• Apply padding-right to any element that needs extra inner space on the right side.
• The value is a length, percentage, or keyword such as inherit or initial.
• The property is not inherited — child elements do not automatically get the parent’s right padding.
• Percentage padding is calculated relative to the width of the containing block.

🎯 Default Value

The default value of the padding-right property is 0, meaning there is no space added to the right side of the element by default.

💎 Property Values

Examples Gallery

Start with the reference box example, try different right values, add trailing spacing in components, and compare physical right padding with logical inline-end padding.

<style>
  .box {
    padding-right: 20px;
    border: 1px solid black;
    background-color: lightgray;
  }
</style>

<div class="box">
  This box has 20px right padding.
</div>

.compact {
  padding-right: 0.5rem;
}

.comfortable {
  padding-right: 1.5rem;
}

.spacious {
  padding-right: 2.5rem;
}

.alert {
  padding-left: 1rem;
  padding-right: 2.5rem;
  padding-block: 0.75rem;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
  color: #92400e;
  font-size: 0.875rem;
}

/* Physical — fixed to right edge */
.physical {
  padding-right: 24px;
}

/* Logical — follows text direction */
.logical {
  padding-inline-end: 24px;
}

padding-right vs padding, padding-inline-end & margin-right

The padding shorthand sets padding on all four sides at once. Use padding-right when you need spacing on only the right edge.

padding-inline-end is the logical equivalent that follows the inline axis. Use padding-right for simple physical layouts; prefer padding-inline-end in multilingual or RTL designs. Remember: margin-right adds space outside the border, not inside it.

/* Right only */
.toolbar {
  padding-right: 1.25rem;
}

/* All four sides via shorthand */
.card {
  padding: 1rem 1.5rem;
}

/* Space to the right outside the border */
.sidebar {
  margin-right: 2rem;
}

♿ Accessibility

• Improve readability — Text benefits from right padding so content does not crowd the right border or trailing controls.
• Touch targets — Buttons and dismiss icons need comfortable right padding so text does not overlap them.
• RTL layouts — For multilingual sites, consider padding-inline-end instead of padding-right so spacing follows text direction.
• Do not hide content — Very large right padding on small screens can squeeze readable text area.
• Test zoomed layouts — Users who zoom in rely on comfortable padding to keep text readable.

💡 Best Practices