= CSS inline size
{c}
<CSS inline size> is a box's extent parallel to text flow within a line. It corresponds to physical width in a horizontal <CSS writing mode> and physical height in a vertical writing mode. The `inline-size` property provides the corresponding flow-relative sizing control.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.1, inline dimension and inline size; §6.4, mappings]{ref}<CSS Logical Properties and Values Module Level 1 by World Wide Web Consortium>[§4.1, block-size and inline-size properties]{ref}
For an own definite-size example, let `inline-size: 180px; block-size: 60px;` apply to a simple box with no padding, borders or competing constraints. Under `horizontal-tb`, the physical rectangle is $180$ by $60$ <CSS pixels>. Under `vertical-rl`, it is $60$ by $180$. Inline size remains $180$ in both descriptions because the inline axis changes with the writing mode.
<CSS box-sizing> determines which box dimension a declared size constrains. For example, with `box-sizing: border-box; inline-size: 80px;`, ten-pixel padding and two-pixel borders on each inline side leave
$$
80-2(10)-2(2)=56
$$
pixels of content extent along that axis, assuming no other sizing constraint intervenes. The outer inline extent is eighty, not fifty-six.
Logical and physical properties can address the same underlying dimension. With equal cascade priorities in horizontal writing, `width: 100px; inline-size: 200px;` supplies a later declaration for the same physical width, so the latter wins. In vertical writing, width and inline-size address different dimensions: physical width can be $100$ while physical height is $200$.<CSS Logical Properties and Values Module Level 1 by World Wide Web Consortium>[§4, paired logical/physical properties and cascading; §4.1, size mapping]{ref}
A direction reversal alone does not change which physical axis is inline. Changing <CSS inline direction> from left-to-right to right-to-left can exchange inline-start and inline-end without converting a horizontal inline size into height. Likewise, <CSS block size> measures the perpendicular axis.
Real used sizes can also depend on min/max constraints, available space and the layout algorithm. State the writing mode and box-sizing convention before interpreting an inline-size value as a visible physical width.
Back to article page
