CSS - inset-inline-end

The CSS property inset-inline-end determines the logical inline end inset of an element. It depends upon the writing mode, direction and text orientation of the element for a physical offset. It relates to the top and bottom, or left or right CSS properties.

Possible Values

The CSS property inset-inline-end takes the same set of values as left CSS property, which are as follows:

  • <length> − Can specify a negative, null or positive value.

  • <percentage> − Percentage of the container's width.

  • auto − Default value. Browser calculates the left position.

  • inherit − Specifies the same value as computed from its parent element.

Applies To

All positioned elements.

Syntax

inset-inline-end = auto | <length-percentage> 

/* <length> values */
inset-inline-end: 5px;
inset-inline-end: 3.4em;
   
/* <percentage>s of the width or height of the containing block */
inset-inline-end: 15%;
   
/* Keyword value */
inset-inline-end: auto;

CSS inset-inline-end - Setting Offset

The following example demonstrates the use of inset-inline-end property with a length value passed to it, which determines the end offset value.

<html>
<head>
<style>
   div {
      background-color: coral;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset-inline-end: 50px;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-end</span>
   </div>
</body>
</html>

CSS inset-inline-end - Percentage Value

The following example demonstrates the use of inset-inline-end property with a percentage value passed to it, which determines the inline end offset value. The writing mode is set as horizontal-tb.

<html>
<head>
<style>
   div {
      background-color: coral;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset-inline-end: 50%;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-end</span>
   </div>
</body>
</html>

CSS inset-inline-end - With direction

The following example demonstrates the use of inset-inline-end property with writing-mode as vertical-lr and text-orientation as rtl.

<html>
<head>
<style>
   div {
      background-color: coral;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: vertical-lr;
      direction: rtl;
      position: absolute;
      inset-inline-end: 20px;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-end</span>
   </div>
</body>
</html>

CSS inset-inline-end - auto Value

The following example demonstrates the use of inset-inline-end property with auto as value passed to it, which determines the end offset value. The writing mode is also set as horizontal-tb.

<html>
<head>
<style>
   div {
      background-color: coral;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset-inline-end: auto;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-end</span>
   </div>
</body>
</html>
Advertisements