CSS inline-size Property

What You’ll Learn

The inline-size property sets an element’s size along the inline axis. It is a logical alternative to width that adapts when writing direction or mode changes.

Introduction

The inline-size property in CSS defines the horizontal or vertical size of an element, depending on the element’s writing mode. In horizontal writing modes, it sets the width. In vertical writing modes, it sets the height along the text flow direction.

This property is useful for responsive designs that must adapt to different writing modes, languages, and screen orientations without rewriting layout rules.

Definition and Usage

Apply inline-size to block containers, cards, columns, and any element where you would normally use width in a horizontal layout. Pair it with related logical properties such as block-size, margin-inline, and padding-inline for consistent logical layouts.

📝 Syntax

The syntax for the inline-size property is similar to other sizing properties:

element {
  inline-size: value;
}

Here, value can be a length, percentage, or keywords such as auto, max-content, min-content, and fit-content.

Basic Example

.box {
  inline-size: 50%;
  background-color: lightblue;
  padding: 10px;
}

Default Value

The default value of the inline-size property is auto, which means the size is determined by the content and other layout properties of the element.

Syntax Rules

• Maps to width in horizontal top-to-bottom writing modes.
• Maps to height in vertical writing modes such as vertical-rl.
• The property is not inherited.
• Accepts the same value types as width in most cases.
• Percentage values depend on the containing block’s inline size.

💎 Property Values

Writing Modes and the Inline Axis

Logical properties follow the document’s writing mode instead of fixed physical directions:

• Horizontal mode (writing-mode: horizontal-tb) — inline axis runs left to right; inline-size controls width.
• Vertical mode (writing-mode: vertical-rl) — inline axis runs top to bottom; inline-size controls height along the text flow.
• Related property — block-size controls the size along the block axis (the opposite dimension).

Examples Gallery

Set a percentage inline size, fixed pixels, vertical writing mode behavior, and compare auto with fit-content.

.box {
  inline-size: 50%;
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

.box {
  inline-size: 200px;
  background-color: #dbeafe;
  padding: 1rem;
}

.vertical-box {
  writing-mode: vertical-rl;
  inline-size: 120px;
  background-color: #ede9fe;
  padding: 1rem;
}

.auto { inline-size: auto; }
.fit { inline-size: fit-content; }

♿ Accessibility

• Do not shrink text containers too narrowly — Small inline sizes can hurt readability.
• Support zoom and reflow — Fixed inline sizes should not block text enlargement.
• Writing mode changes affect layout — Test vertical layouts for logical reading order.
• Keep touch targets wide enough — Buttons sized with fit-content still need adequate padding.
• Maintain logical DOM order — Logical sizing does not replace semantic structure.

💡 Best Practices