CSS - inset-inline-end Property

Quiz

CSS inset-inline-end property sets the distance between the end of an element and its parent container in inline direction. It depends upon the writing mode, direction and text orientation of the element. The position property must be defined in order for the property to show its effect.

Syntax

inset-inline-end: 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 distance of the end of an element using length units (e.g. px, em, rem etc.). Negative values can be used.
percentage	It sets the distance of the end of an element using percentage values relative to its parent container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Inset inline End Property

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

Inset inline End Property with Auto Value

To allow the browser to determine the appropriate offset for the inline end edge 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-end: auto;
      }
   </style>
</head>

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

</html>

Inset Inline End Property with Length Values

To set the distance from the inline-end edge of the containing block, we can specify the distance in length units (e.g. px, em, rem etc.). 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;
         inset-inline-start: 0;
      }

      .inner-box1 {
         inset-inline-end: 30px;
      }

      .inner-box2 {
         inset-inline-end: 6em;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-end property
   </h2>
   <h4>
      inset-inline-end: 30px (The distance of the 
      end of the green area is 30px from the parent 
      container)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline-end property. Observe 
         how the distance of this green area is changed 
         from inline-end.
      </div>
   </div>
   <h4>
      inset-inline-end: 6em (The distance of the end 
      of the green area is 6em from the parent 
      container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline-end property. Observe 
         how the distance of this green area is changed 
         from inline-end.
      </div>
   </div>
</body>

</html>

Inset Inline End Property with Percentage Values

To set the distance from the inline-end edge of the containing block, we can specify the distance in percentage values (e.g. 10%). 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;
         inset-inline-start: 0;
      }

      .inner-box1 {
         inset-inline-end: 20%;
      }

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

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

</html>

Inset Inline End Property with Writing Mode

The inset-inline-end property can be used in combination with the writing-mode property which determines the direction of the text. In horizontal mode, it affects the right distance. In vertical mode, it affects the bottom 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 {
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
         inset-inline-end: 50%;
      }

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

      }

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

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

</html>

Supported Browsers

Property
inset-inline-end	87.0	87.0	63.0	14.1	73.0

css_reference.htm

Print Page