CSS padding-inline Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The padding-inline property controls the padding on an element's inline-start and inline-end edges — in other words, the padding that runs along the inline axis of the current writing mode. Because it is a logical property, the specific physical sides it affects depend on the element's typography: it maps to left/right in a horizontal left-to-right flow, to right/left in an RTL flow, and to top/bottom in vertical flows. This makes it a convenient way to express spacing that automatically adapts to different scripts and orientations; see writing-mode and direction for the layout decisions that determine that mapping.

In the box model the inline padding contributes to the element’s padding area and therefore influences layout, hit testing, and background painting in the same way physical padding properties do. It does not collapse like margins can, and it becomes part of the space that affects an element’s used size and how its contents are positioned. Because that used size can be interpreted differently when the sizing model changes, it interacts with box-sizing. You can still target the equivalent physical edges when needed — for example with padding-left and padding-right — but using the logical property avoids switching between left/right when supporting different writing directions.

Practical use cases for padding-inline include creating bidirectional-safe horizontal spacing, authoring layouts that work with vertical text flows, and keeping style rules simpler and more maintainable across internationalized interfaces. It pairs naturally with other logical properties when you want consistent semantics along the inline axis; for example, you might use it together with margin-inline to manage external spacing or with inset-inline to control inline offsets. Choosing logical properties over physical ones reduces the number of conditional rules needed for RTL or vertical text support.

Definition

Initial value: See individual properties
Applies to: all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Computed value: See individual properties
Animatable: a length
JavaScript syntax: object.style.paddingInline

Interactive Demo

padding-inline: 5% 10%;
writing-mode: horizontal-tb;

padding-inline: 15px 40px;
writing-mode: vertical-rl;
height: 250px;

padding-inline: 5% 20%;
writing-mode: horizontal-tb;
direction: rtl;
unicode-bidi:bidi-override;

padding-inline: 2em 4em;
writing-mode: vertical-lr;
height: 250px;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

padding-inline: <padding-top>{1,2}

Values

<padding-top>{1,2} Specifies distance in px, pt, cm, etc. Negative values are not allowed.

Example

HTML

<div class="container">

  <section class="example ltr" dir="ltr">

    <h2>Left-to-right (dir="ltr")</h2>

    <p class="box">This box uses padding-inline: 2rem; The horizontal padding applies to left and right in LTR.</p>

  </section>



  <section class="example rtl" dir="rtl">

    <h2>Right-to-left (dir="rtl")</h2>

    <p class="box">This box uses padding-inline: 2rem; The horizontal padding applies to right and left in RTL.</p>

  </section>

</div>

CSS

:root {
  --pad: 2rem;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f7f7fb;
  color: #111827;
  padding: 2rem;
  margin: 0;
}

.container {
  display: grid;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.example {
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.example h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.box {
  background: linear-gradient(90deg, #eef2ff 0%, #f0fdf4 100%);
  padding-block: 0.75rem;
  padding-inline: var(--pad);
  border-radius: 6px;
  border: 1px dashed #d1d5db;
  margin: 0;
}

/* Visual hint to show which side is start/end */
.ltr .box {
  outline: 2px solid rgba(59, 130, 246, 0.08);
}

.rtl .box {
  outline: 2px solid rgba(16, 185, 129, 0.08);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS padding-inline property. Hover over a browser icon to see the version that first introduced support for this CSS property.