CSS - inset

The CSS property inset is a shorthand for the other CSS properties top, right, bottom, and / or left.

It follows the same multi-value syntax as that of margin CSS property.

The inset property specifies the physical offsets, irrespective of the writing mode, direction, and text orientation of the element.

Possible Values

The CSS property inset 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 = <'top'>{1,4}  

/* <length> values */
inset: 5px; /* value applied to all edges */
inset: 5px 10px; /* top/bottom left/right */
inset: 3px 5px 8px; /* top left/right bottom */
inset: 3.4em 5em 4em 4em; /* top right bottom left */
   
/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 15% 10% 10% 10%;
   
/* Keyword value */
inset: auto;

CSS inset - Four Length Values

The following example demonstrates the use of inset property with four length values passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 45px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 4 values</span>
   </div>
</body>
</html>

CSS inset - Three Length Values

The following example demonstrates the use of inset property with three length values passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 3 values</span>
   </div>
</body>
</html>

CSS inset - Two Length Values

The following example demonstrates the use of inset property with two length values passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 values</span>
   </div>
</body>
</html>

CSS inset - One Length Value

The following example demonstrates the use of inset property with just one length value passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 1 value</span>
   </div>
</body>
</html>

CSS inset - Percentage Value

The following example demonstrates the use of inset property with two percentage values passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25% 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - 2 % values</span>
   </div>
</body>
</html>

CSS inset - Mixed Values

The following example demonstrates the use of inset property with mixed values, i.e., one length and another as percentage values passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 0.25em 10%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - mixed values</span>
   </div>
</body>
</html>

CSS inset - auto Value

The following example demonstrates the use of inset property with auto value passed to it, which determines the top, right, bottom and left offset values.

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

   .inset-ex {
      writing-mode: vertical-lr;
      position: absolute;
      inset: auto;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset - auto</span>
   </div>
</body>
</html>

CSS inset - Related Properties

The following table lists all the related properties of CSS inset:

Property Description
bottom Sets the vertical position of a positioned element at the bottom.
left Sets the horizontal position of a positioned element on the left side.
right Sets the horizontal position of a positioned element on the right side.
top Sets the vertical position of a positioned element at the top.
margin Shorthand for setting the margin of an element.
inset-block Specifies the logical block start and end offsets of an element.
inset-inline Specifies the logical block start and end offsets of an element in the inline direction.
Advertisements