CSS inline-size Property

❮ Previous Reference Next ❯


p {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 50px;

Hello World!


The inline-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element. A related property is block-size, which defines the other dimension of the element.

Default value:auto
JavaScript syntax:

Standard Syntax

inline-size: auto|length|percentage|max-content|min-content|fit-content(length|percentage)|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
auto This is default value. The browser will calculate the width/height for the specified element on the basis of the values of other properties.
length Specifies the width/height as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Specifies the width/height in percentage. The percentage is calculated with respect to the width/height of the element's containing inline. Negative percentage values are not allowed.
max-content The intrinsic preferred width/height.
min-content The intrinsic minimum width/height.
fit-content(length|percentage) Uses the fit-content formula with the available space replaced by the specified argument.
clamp() Enables selecting a middle value within a range of values between a defined minimum and maximum
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  inline-size: auto;
❮ Previous Reference Next ❯