CSS padding-inline Property

What You’ll Learn

The padding-inline property is a logical CSS shorthand for inner spacing on the inline-start and inline-end sides of an element. In normal horizontal English layouts, that usually means the left and right padding.

Introduction

The padding-inline property in CSS is a shorthand property that sets the padding for the inline start and inline end edges of an element. Unlike traditional padding properties, which are based on the physical left and right sides of an element, padding-inline is logical and adapts to the text direction of the document.

This makes it particularly useful for internationalization, as it automatically adjusts for languages that read from right to left.

Definition and Usage

Apply padding-inline when you need horizontal inner spacing that follows the inline axis instead of fixed physical left and right edges. Use a single value for equal inline-start and inline-end padding, or two values when each side needs a different amount.

Like regular padding, padding-inline 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 property allows you to set the padding for the inline start and end in one declaration. You can use either one or two values.

element {
  padding-inline: value;
}

element {
  padding-inline: start-value end-value;
}

• Single value — Sets the same padding for both inline start and inline end.
• Two values — Sets start-value for the inline start and end-value for the inline end.

Basic Example

.example {
  padding-inline: 20px 10px;
  background-color: lightgray;
}

🎯 Default Value

The default value of the padding-inline property is 0, meaning no padding is applied by default.

💎 Property Values

Examples Gallery

Try the reference example with two values, a single-value form, card horizontal spacing, and a logical vs physical padding comparison.

<style>
  .example {
    padding-inline: 20px 10px;
    background-color: lightgray;
  }
</style>

<div class="example">
  This box has 20px padding at the start and 10px padding at the end.
</div>

.badge {
  padding-inline: 1.25rem;
  padding-block: 0.5rem;
  background: #dbeafe;
  border-radius: 999px;
  display: inline-block;
}

.card {
  padding-inline: 1.25rem;
  padding-block: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

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

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

padding-inline vs padding, padding-block & side properties

The padding shorthand sets all four sides at once using physical edges. Use padding for simple layouts that always use horizontal LTR writing.

padding-block controls block-start and block-end padding (usually top and bottom in English). When you need per-edge inline-axis control, use padding-inline-start, padding-inline-end, or the physical pair padding-left and padding-right.

/* Logical inline-axis spacing */
.card {
  padding-inline: 1.25rem;
  padding-block: 1rem;
}

/* Physical fallback for older browsers */
.legacy-card {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

♿ Accessibility

• Improve readability — Text blocks benefit from inline-axis padding so lines do not touch container side edges.
• Size touch targets — Pair inline padding with block padding on buttons and links for comfortable tap areas.
• Respect text direction — Logical padding keeps spacing correct for RTL and multilingual users.
• Do not hide content — Very large inline 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