CSS - inset-block Property

Previous
Quiz

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

Syntax

inset-block: 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 distance of an element using length units (e.g. px, em, rem etc.). Negative values can be used.
percentageIt sets the 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 Block Property

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

Inset Block Property with Auto Value

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

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

</html>

Inset Block Property with Length Values

To set the distance from the 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 block-start and block-end distances. If two values are given, the first value sets the block-start distance while the second value sets the block-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 {
         position: absolute;
         background-color: lightgreen;
      }

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

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

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

</html>

Inset Block Property with Percentage Values

To set the distance from the 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 block-start and block-end distances. If two values are given, the first value sets the block-start distance while the second value sets the block-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 {
         position: absolute;
         background-color: lightgreen;
      }

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

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

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

</html>

Inset Block Property with Mixed Values

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

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

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

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

</html>

Inset Block Property with Writing Mode

The inset-block property can be used in combination with the writing-mode property which determines the direction of the text. In horizontal mode, it affects the top and bottom distances. In vertical mode, it affects the left and right 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-block: 30px 40px;
      }

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

      }

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

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

</html>

Supported Browsers

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