CSS - inset-inline Property

Previous
Quiz

CSS inset-inline property determines the logical start and end offsets of an element in the inline direction. It depends upon the writing mode, direction and text orientation of the element. It is a shorthand property for inset-inline-end and inset-inline-start CSS properties. The position property must be defined in order for the property to show its effect.

Syntax

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

Property Values

ValueDescription
autoIt determines the size of the element based on its content or other layout factors. Default.
lengthIt sets the inline distance of an element using length units (e.g. px, em, rem etc.). Negative values can be used.
percentageIt sets the inline distance of an element using percentage values relative to its parent container.
initialIt sets the property to its default value.
inheritIt inherits the property from the parent element.

Examples of CSS Inset Inline Property

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

Inset Inline Property with Auto Value

To allow the browser to determine the appropriate offset for the inline-start or inline-end edges based on other CSS properties and the layout rules applied to the element, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner-box {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline property
   </h2>
   <h4>
      inset-inline: auto
   </h4>
   <div class="container">
      <div class="inner-box">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed
         from the inline-start and inline-end.
      </div>
   </div>
</body>

</html>

Inset Inline Property with Length Values

To set the distance from the inline-edges of the containing block, we can specify the distance in length units (e.g. px, em, rem etc.). Upto two values can be given. A single value sets both the inline-start and inline-end distances. If two values are given, the first value sets the inline-start distance while the second value sets the inline-end distance. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
      }

      .inner-box1 {
         inset-inline: 10px;
      }

      .inner-box2 {
         inset-inline: 25px 50px;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline property
   </h2>
   <h4>
      inset-inline: 10px (Both inline-start 
      and inline-end distances are 10px)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
   <h4>
      inset-inline: 25px 50px (inline-start 
      distance is 25px and inline-end distance
      is 50px)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed
         from the inline-start and inline-end.
      </div>
   </div>
</body>

</html>

Inset Inline Property with Percentage Values

To set the distance from the inline-edges of the containing block, we can specify the distance in percentage values (e.g. 10%). Upto two values can be given. A single value sets both the inline-start and inline-end distances. If two values are given, the first value sets the inline-start distance while the second value sets the inline-end distance. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
      }

      .inner-box1 {
         inset-inline: 10%;
      }

      .inner-box2 {
         inset-inline: 20% 40%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline property
   </h2>
   <h4>
      inset-inline: 10% (Both inline-start 
      and inline-end distances are 10% of 
      the container)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
   <h4>
      inset-inline: 20% 40% (inline-start distance
      is 20% and inline-end distance is 40% of 
      the container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
</body>

</html>

Inset Inline Property with Mixed Values

To set the distance from the inline-edges of the containing block, we can specify the distance using a combination of length and percentage values (e.g. 10px 20%). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
      }

      .inner-box1 {
         inset-inline: 10% 55px;
      }

      .inner-box2 {
         inset-inline: 75px 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline property
   </h2>
   <h4>
      inset-inline: 10% 55px (inline-start distance 
      is 10% of container and inline-end distance 
      is 55px )
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
   <h4>
      inset-inline: 75px 15% (inline-start distance 
      is 75px and inline-end distance is 15% of 
      the container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
</body>

</html>

Inset Inline Property with Writing Mode

The inset-inline property can be used in combination with the writing-mode property which determines the direction of the text. In horizontal mode, it affects the left and right distances. In vertical mode, it affects the top and bottom distances. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            border: 2px solid;
            height: 300px;
            width: 300px;
            position: relative;
        }

        .inner {

            position: absolute;
            background-color: lightgreen;
            inset-inline: 30px 40px;
        }

        .inner-box1 {
            height: 100%;
            writing-mode: horizontal-lr;

        }

        .inner-box2 {
            width: 100%;
            writing-mode: vertical-rl;
        }
    </style>
</head>

<body>
    <h2>
        CSS inset-inline property
    </h2>
    <h4>
        inset-inline: 30px 40px ; writing mode: horizontal-lr
    </h4>
    <div class="container">
        <div class="inner inner-box1">
            This shows the inset-inline property. Observe 
            how the distance of this green area is changed 
            from the inline-start and inline-end.
        </div>
    </div>
    <h4>
        inset-inline: 30px 40px ; writing-mode: vertical-lr
    </h4>
    <div class="container">
        <div class="inner inner-box2">
            This shows the inset-inline property. Observe 
            how the distance of this green area is changed 
            from the inline-start and inline-end.
        </div>
    </div>
</body>

</html>

Supported Browsers

PropertyChromeEdgeFirefoxSafariOpera
inset-inline87.087.063.014.173.0
css_reference.htm
Print Page
Previous
Next