CSS - inset-block-end Property

CSS inset-block-end property sets the distance between the end of an element and its parent container in block 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-end-block: 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 Block End Property

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

Inset Block End Property with Auto Value

To allow the browser to determine the appropriate offset for the block 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 {
         position: absolute;
         background-color: lightgreen;
         inset-block-end: auto;
      }
   </style>
</head>

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

</html>

Inset Block End Property with Length Values

To set the distance from the bottom 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 {
         position: absolute;
         background-color: lightgreen;
         inset-block-start: 0;
      }

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

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

<body>
   <h2>
      CSS inset-block-end property
   </h2>
   <h4>
      inset-block-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-block-end property. Observe 
         how the distance of this green area is changed 
         from block-end.
      </div>
   </div>
   <h4>
      inset-block-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-block-end property. Observe 
         how the distance of this green area is changed 
         from block-end.
      </div>
   </div>
</body>

</html>

Inset Block End Property with Percentage Values

To set the distance from the bottom 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 {
         position: absolute;
         background-color: lightgreen;
         inset-block-start: 0;
      }

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

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

<body>
   <h2>
      CSS inset-block-end property
   </h2>
   <h4>
      inset-block-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-block-end property. Observe 
         how the distance of this green area is changed 
         from block-end.
      </div>
   </div>
   <h4>
      inset-block-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-block-end property. Observe 
         how the distance of this green area is changed 
         from block-end.
      </div>
   </div>
</body>

</html>

Inset Block End Property with Writing Mode

The inset-block-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 bottom distance. In vertical mode, it affects the right or left 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-block-start: 0;
         inset-block-end: 50%;
      }

      .inner-box1 {
         writing-mode: horizontal-lr;

      }

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

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

</html>

Supported Browsers

Property
inset-block-end	87.0	87.0	63.0	14.1	73.0

css_reference.htm

Print Page