CSS inline-size Property

The inline-size property in CSS is used to specify the size of an element along the inline direction of the writing mode. It behaves like width in horizontal writing modes and adapts automatically in different writing modes.

Defines the size of an element along the inline axis.
Adapts to different writing modes and text directions.
Helps create flexible and internationalized layouts.

Syntax:

inline-size: length | percentage | auto | inherit | initial | unset

Property values:

length: It sets a fixed value defined in px, cm, pt etc. Negative values are allowed. Its default value is 0px.
percentage: It is same as length but as a percentage of the window size.
auto: It is used when it is desired that the browser determines the inline-size.
initial: It is used to set the value of the block-size property to its default value.
inherit: It is used when it is desired that the element inherit the block-size property of its parent as its own.
unset: It is used unset the default block-size.

Below examples illustrate the inline-size property in CSS

The following examples demonstrate how the inline-size property controls an element's size along the inline axis in different writing modes.

Example 1: The inline-size property sets the size of the element along the inline axis, with the text displayed vertically using writing-mode: vertical-rl.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS | inline-size Property</title>
    <style>
        h1 {
            color: green;
        }
        
        .geek {
            background-color: yellow;
            inline-size: 40%;
            writing-mode: vertical-rl;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inline-size Property</b>
        <br><br>
        <div>
            <b class="geek">GeeksforGeeks</b>
        </div>
    </center>
</body>
</html>

Example 2: The inline-size property sets the inline dimension of the paragraph to 250px, overriding the specified width in the horizontal writing mode.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS | inline-size Property</title>
    <style>
        h1 {
            color: green;
        }
        
        p.geek { 
                width: 200px; 
                height: 200px; 
                border: 1px solid black; 
                writing-mode: horizontal-tb; 
                color: white; 
                background: green; 
                inline-size: 250px;

            } 
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inline-size Property</b>
        <br><br>
        <div>
            <p class="geek">GeeksforGeeks</p>
        </div>
    </center>
</body>
</html>

CSS inline-size Property

Below examples illustrate the inline-size property in CSS

Explore