CSS inline-size Property

Description

The inline-size CSS property specifies the dimension of an element in the inline direction, which is typically the width for horizontal text flow. It allows you to control the size of an element's content box without affecting its block-level layout. For example, when applied to a block-level element like a <div>, inline-size can determine its width, making it particularly useful for responsive design and controlling the layout of inline elements like text or inline-block elements. This property works in conjunction with block-size to fully define an element's size within the layout.

Initial value

auto

Applies to

same as width and height

Inherited

no

Computed value

same as width and height

Animatable

a length, percentage or calc();

JavaScript syntax

object.style.inlineSize

Interactive Demo

inline-size: 150px;
writing-mode: horizontal-tb;

inline-size: 150px;
writing-mode: vertical-rl;

inline-size: auto;
writing-mode: horizontal-tb;

inline-size: auto;
writing-mode: vertical-lr;

Syntax

inline-size: <width>

Values

• <width&gThe inline-size property takes the same values as the width and height properties.

Example

<p class="exampleText">Example text</p>

.exampleText {
  writing-mode: vertical-rl;
  background-color: green;
  inline-size: 110px;
}

Browser Support

The following table will show you the current browser support for the CSS inline-size property.

Desktop
79	57	41	44	12.1

Tablets / Mobile
57	41	43	12.2	5	57

Last updated by CSSPortal on: 2nd January 2024