skip to content

In CSS, how does inline-size differ from width, and when do the two set different physical dimensions?

level: juniorimportance: should knowfreq 40%

answer

  1. physical dimension versus flow dimension
  2. identical in a normal horizontal page
  3. vertical writing mode swaps them
  4. max-inline-size is the readable measure
  5. the word inline means axis, not display type

basics

~10 s

width always sizes the horizontal dimension, while inline-size sizes the box along the text axis. They are identical in horizontal writing modes and swap roles in vertical ones, where inline-size controls height instead.

solid answer

~40 s

`width` and `height` are physical: they always mean horizontal and vertical extent on screen. `inline-size` and `block-size` are flow-relative: `inline-size` measures the box along the axis text runs on, and `block-size` along the axis lines stack on. In the default `writing-mode: horizontal-tb` the two pairs coincide exactly — `inline-size` is width, `block-size` is height — so on a normal English page they are interchangeable. Under `writing-mode: vertical-rl` or `vertical-lr` the axes rotate, and `inline-size` now sets the element's rendered height while `block-size` sets its width. The constraint properties follow the same pattern: `min-inline-size`, `max-inline-size`, `min-block-size`, `max-block-size`. Using the logical names means a component keeps its "length along the text" meaning no matter which writing mode it is dropped into.

code

css · 10 lines
css
.prose {
  inline-size: 100%;
  max-inline-size: 65ch;
  min-block-size: 12rem;
}

.prose--vertical {
  writing-mode: vertical-rl;
  /* max-inline-size still caps line length, now measured vertically */
}

go deeper

for a junior

Be able to say that inline-size is the size along the text axis and equals width on a normal page, and name the min/max variants. That alone answers the screening version of this question.

for a middle

Explain the swap concretely: under vertical-rl, inline-size sets rendered height. Point out that box-sizing and the min-over-max resolution rules carry over unchanged.

for a senior

Argue the practical case — max-inline-size as the readable-measure cap — and flag half-migrated components where logical margins sit next to a physical width as a maintenance hazard.

for a principal

Decide whether the design system's sizing tokens and component APIs speak in logical dimensions, and what enforcement keeps physical width out of new code without churning the whole legacy stylesheet at once.

## Two names for the same box An element's box has two dimensions. CSS lets you name them in two coordinate systems: - **Physical**: `width` is horizontal on screen, `height` is vertical. These never change meaning. - **Flow-relative**: `inline-size` is the extent along the axis text advances on; `block-size` is the extent along the axis lines stack on. These change which physical dimension they touch depending on `writing-mode`. Both pairs describe the same box, honour `box-sizing` identically, and accept the same value types — lengths, percentages, `auto`, and intrinsic keywords. ## When they coincide, and when they do not In `writing-mode: horizontal-tb` — the initial value, and what almost every page uses — text runs horizontally and lines stack vertically. So: ```css .a { inline-size: 40ch; block-size: 10rem; } .b { width: 40ch; height: 10rem; } /* identical rendering in horizontal-tb */ ``` Under `writing-mode: vertical-rl` the inline axis becomes vertical and the block axis horizontal. Now `inline-size: 40ch` constrains how tall the column of vertical text may run, and `block-size` decides how wide the element is. Written with `width`/`height` the same component would constrain the wrong dimension. ## The full set ```css .panel { inline-size: 100%; max-inline-size: 65ch; /* readable measure, whatever the writing mode */ min-block-size: 4rem; block-size: auto; } ``` `min-inline-size`, `max-inline-size`, `min-block-size` and `max-block-size` mirror `min-width`, `max-width`, `min-height` and `max-height` one for one, including the same resolution order where the min constraint wins over the max constraint. ## Why reach for the logical names The strongest everyday case is the readable line-length cap. `max-inline-size: 65ch` says exactly what you mean — "no more than 65 characters along the line" — and stays true if the block is ever rendered in vertical Japanese. `max-width: 65ch` says the same thing only by accident of the writing mode. The second case is consistency. Once margins and padding in a component are written logically, keeping `width` alongside `margin-inline` is a half-migration that reads as an oversight and can mislead the next maintainer into thinking the component is direction-safe when one dimension is not. ## What does not change A common misreading is that `inline-size` somehow behaves like `max-content` or shrink-to-fit because of the word "inline". It does not. The word refers to the axis, not to the `display: inline` box type. On a `display: inline` non-replaced element, `inline-size` is ignored exactly as `width` is ignored — the logical name inherits every rule of the physical one. Switching from `width` to `inline-size` also does not affect `direction`. Sizes have no start or end, so `direction: rtl` alone never changes which dimension either property controls; only `writing-mode` does.

  • Does direction: rtl change what inline-size controls?
    No. `direction` only decides which end of the inline axis is the start, and a size has no start or end — it is a length along an axis. Only `writing-mode` rotates the axes, so only `writing-mode` changes whether `inline-size` maps to width or to height.
  • Do inline-size and block-size interact with box-sizing?
    Exactly as `width` and `height` do. With the initial `box-sizing: content-box` they size the content box; with `border-box` they include padding and border. The logical names are a different coordinate system over the same box model, not a different sizing rule.
  • If width and inline-size are both declared on an element in a horizontal writing mode, what happens?
    They map to the same dimension, so they cascade together and the declaration that comes later at equal specificity wins. That order-dependence is why mixing the two spellings for the same dimension in one codebase is discouraged.

saying these in an interview costs you the question

  • Thinks inline-size relates to display: inline boxes
  • Says inline-size is always just an alias for width
  • Believes direction: rtl swaps inline-size and block-size
  • Assumes there is no logical form of min-width or max-width

context

resolving links…