CSS padding-inline-start Property

What You’ll Learn

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

Introduction

The padding-inline-start property in CSS is used to define the logical inline start padding of an element. It is part of the logical properties and values specification, which allows for more flexible and international-friendly styling by abstracting directionality.

This property is particularly useful in responsive designs and when working with different writing modes and text directions, such as left-to-right (LTR) and right-to-left (RTL).

Definition and Usage

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

Like regular padding, padding-inline-start 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-start property is straightforward. You can specify a length value, a percentage, or the keyword auto.

element {
  padding-inline-start: value;
}

Basic Example

.example {
  padding-inline-start: 20px;
  border: 1px solid black;
}

Syntax Rules

• Apply padding-inline-start to any element that needs extra inner space on the inline-start 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-start padding.
• Percentage padding is calculated relative to the inline size of the containing block.

🎯 Default Value

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

💎 Property Values

Examples Gallery

Start with the reference div example, try different inline-start values, add leading spacing in components, and compare logical inline-start padding with physical left padding.

<style>
  .example {
    padding-inline-start: 20px;
    border: 1px solid black;
  }
</style>

<div class="example">
  This div has a padding-inline-start of 20px.
</div>

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

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

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

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

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

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

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

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

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

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

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

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

♿ Accessibility

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