CSS - inset Property

Quiz

CSS inset property is used to control the position of an element relative to its containing block. It is a shorthand property for defining values to the properties top, right, bottom, and / or left in a single statement. The position property must be declared in order for the property to show its effect.

Syntax

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

The following examples explain the inset property with different values.

Inset Property with Auto Value

To let the browser calculate the positioning based on the element's default behavior or other factors, we use the auto value. This value is often used to align the elements position according to its containing block's edges. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .text {
         position: absolute;
         inset: auto;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: auto
   </h4>
   <div class="container">
      <p class="text">
         TutorialsPoint offers extensive online tutorials
         and courses on various tech topics, including 
         programming, web development, and data science.
      </p>
   </div>
</body>

</html>

Inset Property with Length Values

To set the position of the element, we can use length units (e.g. px,rem,em etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
      }

      .one-val {
         inset: 15px;
      }

      .two-val {
         inset: 15px 40px;
      }

      .three-val {
         inset: 15px 35px 45px;
      }

      .four-val {
         inset: 15px 25px 35px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 15px (all four sides
      have 15px distance)
   </h4>
   <div class="container">
      <p class="values one-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 40px (top and bottom have 
      15px distance while left and right 
      have 40px distance)
   </h4>
   <div class="container">
      <p class=" values two-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 35px 45px (top has 15px 
      distance, left and right have 35px 
      distance and bottom has 45px distance)
   </h4>
   <div class="container">
      <p class=" values three-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 25px 35px 45px (top has 15px 
      distance, right has 25px distance, bottom 
      has 35px distance and left has 45px distance)
   </h4>
   <div class="container">
      <p class=" values four-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

Inset Property with Percentage Values

To set the position of the element, we can use percentage values (e.g. 5%, 10% etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
      }

      .one-val {
         inset: 15%;
      }

      .two-val {
         inset: 5% 15%;
      }

      .three-val {
         inset: 5% 25% 15%;
      }

      .four-val {
         inset: 5% 25% 30% 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 15% (all four sides have 
      15% distance of the container)
   </h4>
   <div class="container">
      <p class="values one-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
   </div>
   <h4>
      inset: 5% 15% (top and bottom have 
      5% distance while left and right 
      have 15% distance of the container)
   </h4>
   <div class="container">
      <p class=" values two-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 5% 15% 25% (top has 5% distance, 
      left and right have 15% distance and 
      bottom has 25% distance of the container)
   </h4>
   <div class="container">
      <p class=" values three-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 5% 25% 30% 15% (top has 5% distance, 
      right has 25% distance, bottom has 30% 
      distance and left has 15% distance of 
      the container)
   </h4>
   <div class="container">
      <p class=" values four-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

Inset Property with Mixed Values

To set the position of the element, we can use a combination of length units (e.g. px,rem,em etc.) and percentage values (e.g. 10%, 20% etc.). The inset property accepts upto four values. Depending on the number of values provided, the corresponding edges will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
         inset: 25px 10% 15px 35%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 25px 10% 15px 35% (top has 25px distance, 
      right has 10% distance from the container, bottom 
      has 15px distance and left has 35% distance from 
      the container)
   </h4>
   <div class="container">
      <p class="values">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

Note: The inset property accepts different number of parameters, so depending on the number of values provided, the corresponding edges will be affected.

One value: it applies distance to all four edges equally.
Two values: the first value provides distance to top and bottom edges while the second value provides value to the left and right edges.
Three values: the first value provides distance to the top edge, second value provides distance to left and right edges and the third value provides distance to the bottom edge.
Four Values: the first value provides distance to the top edge, second value to the right edge, third value to the bottom edge and fourth value to the left edge.

Supported Browsers

Property
inset	88.0	88.0	66.0	14.1	73.0

css_reference.htm

Print Page