CSS | inset Property

Last Updated : 26 Aug, 2022

The inset property in CSS is used to define physical offset, not for the inline offset or logical block. This property can apply to any writing-mode property.

Syntax:

inset: length|percentage|auto|inherit|initial|unset;

Property values:

length: It sets a fixed value defined in px, cm, pt etc. Negative values are also allowed. Its default value is 0px.
percentage: It is same as length but it set the size in terms of percentage of the window size.
auto: It is used when it is desired that the browser determines the inset size.
initial: It is used to set the value of the inset property to its default value.
inherit: It inherits the inset property value from its parent element.
unset: It is used to unset the inset property and it is the default value.

Below examples illustrate the inset property in CSS:

Example 1:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: purple;
            width: 200px;
            height: 100px;
            position: relative;
        }
         
        .one {
            position: relative;
            inset: 10px 40px 30px 0px;
            background-color: #c8c800;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset Property</b>
        <br><br>
        <div>
            <p class="one">
            A Computer Science Portal
            </p>
        </div>
    </center>
</body>
</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: purple;
            width: 200px;
            height: 100px;
            position: relative;
        }
         
        .one {
            position: relative;
            inset: 10% 5% 5% 0%;
            background-color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset Property</b>
        <br><br>
        <div>
            <p class="one">
            A Computer Science Portal
            </p>
        </div>
    </center>
</body>
</html>