CSS inline-size property

Previous Page initial-letter
Next Page inset

Definition and Usage

inline-size specifies the size of the element in the inline direction.

Note:related CSS properties writing-mode defines the inline direction, which affects inline-size properties result. For English pages, the inline direction is from left to right, and the block direction is downward.

CSS's inline-size and block-size properties are related to CSS's width and height are very similar, but inline-size and block-size The attribute depends on the inline and block directions.

Example

Example 1

Set the size of the <div> element in the inline direction:

div {
  inline-size: 200px;
}

Try It Yourself

Example 2

when the writing-mode is set to vertical-rl when, the inline direction changes from horizontal to vertical downward, which affects inline-size How the attribute works:

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

inline-size: auto|length|initial|inherit;

Property Value

Value	Description
auto	Default Value. The default inline-size value of the element.
length	Specifies the size of the inline direction, in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specifies the percentage of the corresponding axis size relative to the parent element.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.inlineSize="250px"