Skip to content
Related Articles

Related Articles

CSS | inset-block-end Property
  • Last Updated : 19 Jun, 2020

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

Syntax:

inset-block-end: 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 the same as length but it set in terms of percentage of the window size.
  • auto: It is used when it is desired that the browser determines the inset-block-end.
  • initial: It is used to set the value of the inset-block-end property to its default value.
  • inherit: It is used when it is desired that the element inherits the inset-block-end property from its parent element.
  • unset: It is used to unset the default inset-block-end property.

Below examples illustrate the inset-block-end property in CSS:

Example 1:






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

Output:

Example 2:




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

Output:

Supported Browsers: The browser supported by inset-block-end property are listed below:

  • Firefox
  • Google Chrome
  • Edge
  • Opera

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end

My Personal Notes arrow_drop_up
Recommended Articles
Page :