CSS - inline-size Property

Quiz

CSS inline-size property determines the horizontal or vertical size of an element's inline, based on the writing mode of the element. It relates to the width or the height properties of CSS, based on the value of writing-mode. When the writing mode is vertically orientated, the value of inline-size relates to the height of the element, else it relates to the width of the element.

Syntax

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

Property Values

Value	Description
auto	It determines the size of the element based on its content or other layout factors. Default.
length	It sets the inline-size of an element using length units (e.g. px, em, rem etc.). Negative values can be used.
percentage	It sets the inline-size of an element using percentage values.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Inline Size Property

The following examples explain the inline-size property with different values.

Inline Size Property with Auto Value

To allow the browser to determine the size of the element based on its content, the size of its containing block, and other layout factors, we use the auto value. It works in similar way like the width property in horizontal mode. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
         inline-size: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: auto
   </h4>
   <p class="example">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

Inline Size Property with Length Values

To set a fixed inline-size to an element, we can specify the size in length units (e.g. 10px, 25em, 16 rem etc.). The value is absolute and does not adjust based on the size of the containing block or other elements. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
      }

      .example-a {
         inline-size: 400px;
      }

      .example-b {
         inline-size: 32em;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: 400px
   </h4>
   <p class="example example-a">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
   <h4>
      inline-size: 32em 
   </h4>
   <p class="example example-b">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

Inline Size Property with Percentage Values

To set a fixed inline-size to an element, we can specify the size in percentage values (e.g. 105, 25% etc.). This sets the elements size as a percentage of its containing block's inline size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
      }
      .example-a {
         inline-size: 70%;
      }

      .example-b {
         inline-size: 90%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: 55%
   </h4>
   <p class="example example-a">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
   <h4>
      inline-size: 70%
   </h4>
   <p class="example example-b">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

Inline Size Property with Writing Mode

The inline-size property can be used in combination with the writing-mode property which defines the direction of the text. When the writing-mode is set to vertical mode ( like top-to-bottom), the inline-size property refers to height and in horizontal mode (like left-to-right), it refers to the width. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
         inline-size: 400px;
      }

      .example-a {
         writing-mode: horizontal-lr;
      }

      .example-b {
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: 400px; 
      writing-mode: horizontal-lr
   </h4>
   <p class="example example-a">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
   <h4>
      inline-size: 400px; 
      writing-mode: vertical-lr 
   </h4>
   <p class="example example-b">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

Supported Browsers

Property
inline-size	57.0	79.0	41.0	12.1	44.0

css_reference.htm

Print Page