CSS padding-inline-end Property

What You’ll Learn

The padding-inline-end property sets inner spacing on the inline-end side of an element. In horizontal left-to-right writing, that is usually the right padding between content and the border.

Introduction

The padding-inline-end property in CSS is used to define the padding at the end of an element’s inline direction.

This property is part of the logical properties in CSS, which allows for more flexible layouts that can adapt to different writing modes, such as left-to-right (LTR) or right-to-left (RTL) text directions.

Definition and Usage

Apply padding-inline-end when you need inner spacing on only the inline-end side and want that spacing to follow the inline axis instead of a fixed physical right edge. Use it for paragraphs, buttons with trailing icons, list items, and any component that needs extra room after the content along the inline direction.

Like regular padding, padding-inline-end 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-inline-end property is simple. You can specify the padding using any valid CSS length value, including pixels, ems, percentages, and more.

element {
  padding-inline-end: value;
}

Here, value can be a length (e.g., 10px, 1em, 5%) or a keyword like auto or inherit.

Basic Example

p {
  padding-inline-end: 20px;
  background-color: lightgrey;
}

Syntax Rules

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

🎯 Default Value

The default value of the padding-inline-end property is 0. This means that if no value is specified, there will be no padding applied at the end of the inline direction.

💎 Property Values

Examples Gallery

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

<style>
  p {
    padding-inline-end: 20px;
    background-color: lightgrey;
  }
</style>

<p>
  This paragraph has padding at the inline end. In LTR, that is extra space on the right.
</p>

.compact {
  padding-inline-end: 0.5rem;
}

.comfortable {
  padding-inline-end: 1.5rem;
}

.spacious {
  padding-inline-end: 2.5rem;
}

.btn-next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1.25rem;
  padding-block: 0.6rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
}

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

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

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

The padding-inline shorthand sets both inline-start and inline-end padding in one declaration. Use padding-inline-end when you need spacing on only the inline-end side.

padding-right always targets the physical right edge. Pair padding-inline-end with padding-inline-start for full per-edge inline-axis control, or use padding for physical four-side shorthand.

/* Inline-end only */
.label {
  padding-inline-end: 1rem;
}

/* Both inline sides via shorthand */
.card {
  padding-inline: 1.25rem 0.75rem;
}

/* Physical fallback for older browsers */
.legacy-label {
  padding-right: 1rem;
}

♿ Accessibility

• Improve readability — Text benefits from inline-end padding so content does not crowd the trailing border edge.
• Respect text direction — Logical inline-end padding keeps spacing correct for RTL and multilingual users.
• Size touch targets — Buttons with trailing icons need comfortable inline-end padding for easy tapping.
• Do not hide content — Very large inline-end 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