Open In App

CSS | inset-inline Property

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

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

Property values:

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

Below examples illustrate the inset-inline property in CSS: 

Example 1: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset-inline Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: green;
            width: 200px;
            height: 120px;
        }
         
        .one {
            position: relative;
            inset-inline: 30px 50px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset-inline Property</b>
        <br>
        <br>
        <div>
            <p class="one">
                A Computer Science Portal for Geeks
            </p>
        </div>
    </center>
</body>
</html>


Output:

  

Example 2: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset-inline Property</title>
    <style>
        h1 {
            color: green;
        }
         
        div {
            background-color: green;
            width: 200px;
            height: 120px;
        }
         
        .one {
            writing-mode: vertical-rl;
            position: relative;
            inset-inline: 30px 50px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset-inline Property</b>
        <br>
        <br>
        <div>
            <p class="one">
                A Computer Science Portal for Geeks
            </p>
        </div>
    </center>
</body>
</html>


Output:

  

Supported Browsers: The browsers supported by inset-inline property are listed below:

  • Google Chrome 87+
  • Firefox 63+
  • Edge 87+
  • Opera 73+
  • Safari 14.1+


Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads