CSS properties - inline-size

revision: February 2, 2024

inline-size property

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

The related CSS property writing-mode defines inline direction, and this affects the result of the inline-size property. For pages in English, inline direction is left to right and block direction is downward.

The CSS inline-size and block-size properties are very similar to CSS properties width and height, but the inline-size and block-size properties are dependent on inline and block directions.

CSS syntax : inline-size: auto | value | initial | inherit;

Property values:

auto : default. The element's default inline-size value.

length : specifies the inline-size in px, pt, cm, etc. Negative values are allowed.

% : specifies the inline-size in percent relative to size of parent element on the corresponding axis.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.inlineSize="25vw"

example: inline-size property

div element

div element with writing mode property set to vertical-rl

code:

                <div>
                    <div id="Div-A">div element</div><br>
                    <div id="Div-B">div element with writing mode property set to vertical-rl</div>
                </div>
                <style>
                    div#Div-A {background-color: lightblue; border: solid black 0.1vw; height: 5vw; inline-size: 20vw;}
                    div#Div-B {background-color: lightblue; border: solid black 0.1vw; height: 5vw; inline-size: 15vw;
                         writing-mode:vertical-rl;}
                </style>