CSS properties - inset-related

revision: March 16, 2024

Content

inset property inset-block property inset-block-end property inset-block-start property inset-inline property inset-inline-end property inset-inline-start property

inset property

top

- sets the distance between an element and the parent element. For this property to take effect it has to have the "position property" specified.

The inset property is a shorthand property for the following properties: "top", "bottom", "left", "right".

Values for the inset property can be set in different ways:

If the inset property has four values : {inset: 15px 30px 60px 90px;} : top distance is 15px, right distance is 30px, bottom distance is 60px, left distance is 90px.
If the inset property has three values : {inset: 15px 30px 60px;} : top distance is 15px, left and right distances are 30px, bottom distance is 60px.
If the inset property has two values : {inset: 15px 30px;} : top and bottom distances are 15px, left and right distances are 30px.
If the inset property has one value : {inset: 10px;} : all four distances are 10px.

CSS syntax : inset: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset distance.

length : specifies inset in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.inset="10vw 5vw"

example: inset property

This DIV has a size defined by the distance of 3vw to the parent DIV element, on all four sides.

This div element has a distance of 1vw to parent from top, 3vw from left and right, and 6vw bottom.

code:

                <div>
                    <div id="parentDIV">
                        <div id="myDIV">This DIV has a size defined by the distance of 3vw to the parent DIV element, 
                        on all four sides.</div>
                    </div><br>
                    <div id="parentDiv-b">
                        <div id="myDiv-b">This div element has a distance of 1vw to parent from top, 3vw from left 
                        and right, and 6vw bottom.</div>
                    </div>
                </div>
                <style>
                    #parentDIV, #parentDiv-b{position: relative; width: 60%; height: 15vw; border: solid black 0.2vw;}
                    #myDIV{ position: absolute;  background-color: lightblue; inset: 3vw; }
                    #myDiv-b{ position: absolute;  background-color: lightblue; inset: 1vw 3vw 6vw; }
                </style>

inset-block property

top

- sets the distance between an element and the parent element in the block direction. For this property to take effect it has to have the "position property" specified.

The inset-block property is a shorthand property for the following properties: "inset-block-start", "inset-block-end".

Values for the inset-block property can be set in different ways:

If the inset-block property has two values : {inset-block: 10px 15px;} : distance at start is 10px, distance at end is 15px.
If the inset-block property has one value : {inset-block: 10px;} : distance at start and end is 10px.

The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the inset-block property. For pages in English, block direction is downward and inline direction is left to right.

CSS syntax : inset-block: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset-block distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.insetBlock="10vw 3vw"

example: inset-block property

This DIV has a size defined by the distance of 1vw to the parent DIV element from start of block, and 5vw distance to parent from end of block.

code:

                <div>
                    <div id="parentDIV-C">
                        <div id="myDIV-C">This DIV has a size defined by the distance of 1vw to the parent DIV element
                        from start of block, and 5vw distance to parent from end of block.</div>
                    </div><br>
                    <div id="parentDIV-D">
                        <div id="myDIV-D">This DIV has a size defined by the distance of 1vw to the parent DIV element 
                        from start of block, and 5vw distance to parent from end of block.</div>
                    </div>
                </div>
                <style>
                    #parentDIV-C, #parentDIV-D{position: relative; width: 60%; height: 15vw; border: solid black 0.2vw;}
                    #myDIV-C{ position: absolute;  background-color: lightblue; inset-block: 1vw 5vw; }
                    #myDIV-D{ position: absolute;  background-color: lightblue; inset-block: 1vw 5vw; writing-mode: vertical-rl; }
                </style>

inset-block-end property

top

- sets the distance between the end of an element and the parent element in the block direction. For this property to take effect it has to have the "position property" specified.

CSS syntax : inset-block-end: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.insetBlockEnd="3vw"

example: inset-block-end property

This DIV has a distance of 5vw to the parent DIV element from end of element in the block direction.

code:

                <div>
                    <div id="parentDIV-E">
                        <div id="myDIV-E">This DIV has a distance of 5vw to the parent DIV element from end of element in the block direction.</div>
                    </div><br>
                    
                </div>
                <style>
                    #parentDIV-E{position: relative; width: 60%; height: 15vw; border: solid black 0.2vw;}
                    #myDIV-E{ position: absolute;  background-color: lightblue; inset-block-start: 0; inset-block-end: 5vw; }
                    
                </style>

inset-block-start property

top

- sets the distance between the start of an element and the parent element in the block direction. For this property to take effect it has to have the "position property" specified.

Values for the inset-block property can be set in different ways:

CSS syntax : inset-block-start: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset-block distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.insetBlockStart="10vw"

example: inset-block-start property

This DIV has a distance of 5vw to the parent DIV element from start of element in the block direction.

code:

            <div>
                <div id="parentDIV-F">
                    <div id="myDIV-F">This DIV has a distance of 5vw to the parent DIV element from start of element in the block direction.</div>
                </div>
            </div>
            <style>
                #parentDIV-F{position: relative; width: 60%; height: 15vw; border: solid black 0.2vw;}
                #myDIV-F{ position: absolute;  background-color: lightblue; inset-block-end: 0; inset-block-start: 5vw; }
                
            </style>

inset-inline property

top

- sets the distance between an element and the parent element in the inline direction. For this property to take effect it has to have the "position property" specified.

The inset-inline property is a shorthand property for the following properties: "inset-inline-start", "inset-inline-end".

Values for the inset-inline property can be set in different ways:

If the inset-inline property has two values : {inset-inline: 10px 15px;} : distance at start is 10px, distance at end is 15px.
If the inset-block property has one value : {inset-inline: 10px;} : distance at start and end is 10px.

The related CSS property writing-mode and direction define inline direction. This affects where the start and end of a line is and the result of the inset-inline property. For pages in English, inline direction is left to right and block direction is downward.

CSS syntax : inset-inline: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset-inline distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.insetInline="10vw 3vw"

examples

This DIV has a size defined by the distance of 1vwixels to the parent DIV element from start of element, and 5vw distance to parent from end of element, in the inline direction.

This DIV has a size defined by the distance of 1vw to the parent DIV element from start of block, and 5vw distance to parent from end of block.

code:

            <div>
                <div id="parentDIV-G">
                    <div id="myDIV-G">This DIV has a size defined by the distance of 1vwixels to the parent DIV element 
                    from start of element, and 5vw distance to parent from end of element, in the inline direction.</div>
                </div><br>
                <div id="parentDIV-H">
                    <div id="myDIV-H">This DIV has a size defined by the distance of 1vw to the parent DIV element 
                    from start of block, and 5vw distance to parent from end of block.</div>
                </div>
            </div>
            <style>
                #parentDIV-G, #parentDIV-H{position: relative; width: 60%; height: 15vw; 
                    border: solid black 0.2vw;}
                #myDIV-G{ position: absolute;  background-color: lightblue; height: 100%; 
                    inset-inline: 1vw 5vw; }
                #myDIV-H{ position: absolute;  background-color: lightblue; width: 100%; 
                    inset-inline: 1vw 5vw; writing-mode: vertical-rl; }
            </style>

inset-inline-end property

top

- sets the distance between the end of an element and the parent element in the inline direction. For this property to take effect it has to have the "position property" specified.

The related CSS property writing-mode and direction define inline direction. This affects where the end of a line is in the inline direction and the result of the inset-inline-end property. For pages in English, inline direction is left to right and block direction is downward.

CSS syntax : inset-inline-end: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.insetInlineEnd="30%"

examples

This DIV has a size defined by the distance of 3vw to the parent DIV element from end of element in the inline direction

code:

            <div>
                <div id="parentDIV-I">
                    <div id="myDIV-I">This DIV has a size defined by the distance of 3vw to the parent DIV element
                     from end of element in the inline direction</div>
                </div><br>
            </div>
            <style>
                #parentDIV-I{position: relative; width: 60%; height: 15vw; border: solid black 0.2vw;}
                #myDIV-I{ position: absolute;  background-color: lightblue; height: 100%; inset-inline-end: 3vw; }
                
            </style>

inset-inline-start property

top

- sets the distance between the start of an element and the parent element in the inline direction. For this property to take effect it has to have the "position property" specified.

Values for the inset-block property can be set in different ways:

The related CSS property writing-mode and direction define inline direction. This affects where the start and end of an element is in the inline direction and the result of the inset-inline-start property. For pages in English, inline direction is left to right and block direction is downward.

CSS syntax : inset-inline-start: auto | value | initial | inherit;

Property values:

auto : default. The element's default inset-block distance.

length : specifies distance in px, pt, cm, etc. Negative values are allowed.

% : specifies distance in percent relative to size of parent element on the corresponding axis..

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax : object.style.insetInlineStart="10%"

examples

This DIV has a distance of 3vw to the parent DIV element from start of element in the inline direction.

code:

            <div>
                <div id="parentDIV-J">
                    <div id="myDIV-J">This DIV has a distance of 3vw to the parent DIV element from start of
                    element in the inline direction.</div>
                </div>
            </div>
            <style>
                #parentDIV-J{position: relative; width: 60%; height: 15vw; border: solid black 0.2vw;}
                #myDIV-J{ position: absolute;  background-color: lightblue; height: 100%; 
                    inset-inline-start: 3vw; }
                
            </style>