Understanding the CSS padding-inline Shorthand

The CSS padding-inline shorthand is a logical property used to set the internal spacing on the inline axes of an element, typically replacing the physical padding-left and padding-right properties. This article covers what padding-inline is, how its syntax works, how it adapts to different writing modes and text directions, and why it is an essential tool for building modern, responsive, and internationalized user interfaces.

What is padding-inline?

In standard web design, web pages have historically relied on physical properties such as padding-left, padding-right, padding-top, and padding-bottom. These properties correspond strictly to the physical sides of a display screen, regardless of language or document flow.

padding-inline is part of the CSS Logical Properties and Values specification. It defines the logical inline start and inline end padding of an element. In standard horizontal writing modes—such as English (left-to-right) or Arabic (right-to-left)—the inline axis corresponds to the horizontal axis. Therefore, padding-inline directly manages the lateral padding of an element.

It serves as a shorthand mapping to two distinct properties:

  • padding-inline-start
  • padding-inline-end

Syntax and Usage

The padding-inline shorthand accepts either one or two values, following the standard spacing syntax in CSS:

Single Value Syntax

When provided with a single value, that padding is applied equally to both the start and end of the inline axis:

.button {
  padding-inline: 1.5rem;
}

In a standard left-to-right layout, this applies 1.5rem to both the left and right sides.

Two-Value Syntax

When provided with two values, the first value sets the padding-inline-start, and the second value sets the padding-inline-end:

.card {
  padding-inline: 2rem 1rem;
}

In a left-to-right layout, this applies 2rem to the left (start) and 1rem to the right (end).

Managing Lateral Padding Across Writing Modes

The primary advantage of padding-inline over traditional physical properties is how it automatically adapts to different writing directions and writing modes.

Left-to-Right (LTR) vs. Right-to-Left (RTL)

In a standard horizontal left-to-right (LTR) context, such as English:

  • inline-start maps to left.
  • inline-end maps to right.

In a right-to-left (RTL) context, such as Arabic or Hebrew:

  • inline-start maps to right.
  • inline-end maps to left.

If you use padding-inline: 2rem 1rem;, an LTR element gets 2rem on the left and 1rem on the right. If the user switches the document language to RTL (dir="rtl"), the browser automatically reverses this layout: 2rem is applied to the right, and 1rem is applied to the left. Using traditional properties would have required manually overriding padding-left and padding-right inside specific RTL CSS rules.

Vertical Writing Modes

When an element uses a vertical writing mode (such as writing-mode: vertical-rl), the inline axis changes direction:

  • The inline axis runs vertically (top to bottom).
  • The block axis runs horizontally.

In this scenario, padding-inline dynamically shifts to control the top and bottom padding, ensuring the lateral spacing relative to the flow of the text remains intact without requiring custom media queries or layout overrides.

Why Use padding-inline?

  1. Simplified Internationalization (i18n): Components automatically display correct spacing when flipped between LTR and RTL scripts without additional CSS classes or stylesheets.
  2. Cleaner, Shorter Code: Instead of declaring separate padding-left and padding-right rules, or resetting unintended top/bottom values when using the four-value padding shorthand, padding-inline sets both horizontal sides in a single, focused declaration.
  3. Component Reusability: Design system components become more robust and context-agnostic, maintaining proper relative spacing inside diverse parent layouts.