Open In App

CSS inset-block-start Property

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax

inset-block-start: length|percentage|auto|inherit|initial|unset;

Property Values

Values

Descriptions

length

It sets a fixed value defined in px, cm, pt, etc. Negative values are allowed. Its default value is 0px.

percentage(%)

It is the same as length but the size is set in terms of percentage of the window size.

auto

It is used when it is desired that the browser determines the block-size.

initial

It is used to set the value of the inset-block-start property to its default value.

inherit

It is used when it is desired that the element inherits the inset-block-start property of its parent as its own.

unset

It is used unset the default inset-block-start.

Example 1: Below example illustrate the inset-block-start property in CSS.

HTML




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


Output:

 Example 2: Below is another example that illustrate the inset-block-start property in CSS.

HTML




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


Output:

 Supported Browsers

The browsers supported by inset-block-start property are listed below:

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


Last Updated : 14 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads