CSS propertyBox model

inline-size

Sets the element’s size along the text line. In horizontal writing that’s the width, and its pair block-size sets the height.

Initial value: auto
Inherited: No
Animatable: yes, as a length or percentage
Applies to: all elements except non-replaced inline elements (e.g. span), table rows, and row groups
JavaScript: element.style.inlineSize = "320px"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.card {
  inline-size: min(100%, 280px);
  padding: 12px;
  border-radius: 14px;
  background: #18181b;
}

.card img {
  display: block;
  inline-size: 100%;
  block-size: 120px;
  object-fit: cover;
  border-radius: 10px;
}

Example HTML

<article class="card">
  <img src="/collections/covers/kurs-html-css-od-podstaw.webp" alt="" width="1536" height="1024">
  <strong style="display: block; margin-top: 8px;">HTML and CSS course</strong>
  <small style="color: #a1a1aa;">11 modules · 738 tasks</small>
</article>

Preview

Definition and usage

The inline-size property is the logical equivalent of width. It sets the element’s size on the inline axis, the direction text flows within a line. In ordinary horizontal text that’s simply the width, and both properties give the same result.

Its pair, block-size, sets the size on the block axis, along which consecutive paragraphs stack. In horizontal writing that’s the height. Once an element gets writing-mode: vertical-rl, the roles swap: inline-size controls the height, and block-size the width.

Both have constrained versions: min-inline-size, max-inline-size, min-block-size, and max-block-size. They work like min-width, max-width, and their vertical counterparts. All of them accept the same values as width: auto, lengths, percentages, plus min-content, max-content, and fit-content.

Just like width, inline-size has no effect on inline elements such as <span>. You’ll meet the same vocabulary in container queries: container-type: inline-size tracks exactly this inline size.

Syntax

inline-size: auto | <length> | <percentage> | min-content | max-content | fit-content;
block-size: auto | <length> | <percentage> | min-content | max-content | fit-content;

Values

auto
A block-level element takes up all the available length of the line, meaning the parent’s full width.
160px
<length>
A fixed inline size. In horizontal text that’s 160px of width.
50%
<percentage>
Half the inline size of the containing block.
block-size: 80px
block axis
The pair for the block axis. In horizontal text it sets the element’s height.
max-inline-size: 24ch
upper limit
The paragraph is at most about 24 characters per line. In vertical writing, the same rule would limit the column’s height.
vertical-rl
vertical writing mode
In vertical writing, the inline axis runs top to bottom, so inline-size: 100px sets the element’s height, not its width. The width now comes from the content.

Value	Type	Description
auto		A block-level element takes up all the available length of the line, meaning the parent’s full width.
160px	<length>	A fixed inline size. In horizontal text that’s 160px of width.
50%	<percentage>	Half the inline size of the containing block.
block-size: 80px	block axis	The pair for the block axis. In horizontal text it sets the element’s height.
max-inline-size: 24ch	upper limit	The paragraph is at most about 24 characters per line. In vertical writing, the same rule would limit the column’s height.
vertical-rl	vertical writing mode	In vertical writing, the inline axis runs top to bottom, so `inline-size: 100px` sets the element’s height, not its width. The width now comes from the content.

Values in practice

auto

A block-level element takes up all the available length of the line, meaning the parent’s full width.

.demo { inline-size: auto; }

160px

A fixed inline size. In horizontal text that’s 160px of width.

.demo { inline-size: 160px; }

50%

Half the inline size of the containing block.

.demo { inline-size: 50%; }

block-size: 80px

The pair for the block axis. In horizontal text it sets the element’s height.

.demo { block-size: 80px; }

max-inline-size: 24ch

The paragraph is at most about 24 characters per line. In vertical writing, the same rule would limit the column’s height.

.demo { max-inline-size: 24ch; }

vertical-rl

In vertical writing, the inline axis runs top to bottom, so inline-size: 100px sets the element’s height, not its width. The width now comes from the content.

.stage { writing-mode: vertical-rl; width: 100%; height: 170px; }
.demo { inline-size: 100px; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

A text column works well with max-inline-size: 65ch. In vertical writing, the same rule reasonably limits the column’s height.
Don’t set width and inline-size on the same element. They describe the same dimension, so whichever declaration comes later in the cascade wins, and that’s easy to miss.
If inline-size doesn’t seem to work, check the display. Just like width, it has no effect on <span> or <a> without switching to inline-block or block.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course