The inline-size CSS property defines an element’s size in the inline axis — the direction in which text and other inline content flow. Because it is a logical property, its effect depends on the element’s writing mode and direction rather than always mapping to the horizontal or vertical physical axes; for example, in typical horizontal text it behaves like width, while in vertical-rl flows its measurement runs top-to-bottom. The axis that counts as “inline” is determined by the element’s writing-mode, so switching writing modes lets the same declaration adapt gracefully to different text directions and scripts.

Using inline-size lets you express layout constraints in a way that’s neutral to the page’s orientation and language, which simplifies internationalization and reflow scenarios. Percentages on inline-size resolve against the containing block’s inline dimension, so when you reason about a percentage-based inline size you are effectively comparing with the parent’s inline measure (which itself might originate from a physical block-size or width declaration depending on writing mode). For replaced and intrinsically-sized elements, inline-size participates in the usual intrinsic sizing rules, interacting with aspect ratios and intrinsic widths or heights where applicable.

Practical layout control often combines inline-size with its constraint counterparts: min-inline-size and max-inline-size, which limit how small or large the inline extent may become during reflow. It also interacts with box model concerns such as box-sizing (which affects whether paddings and borders are included inside the declared inline measure) and with overflow handling via overflow. Because it is logical, using inline-size makes components more robust when used in multi-directional layouts, flexible containers, and responsive designs where writing mode or orientation may change.