”;
The CSS property inset is a shorthand for the other CSS properties top, right, bottom, and / or left.
It follows the same multi-value syntax as that of margin CSS property.
The inset property specifies the physical offsets, irrespective of the writing mode, direction, and text orientation of the element.
Possible Values
The CSS property inset takes the same set of values as left CSS property, which are as follows:
-
<length> − Can specify a negative, null or positive value.
-
<percentage> − Percentage of the container”s width.
-
auto − Default value. Browser calculates the left position.
-
inherit − Specifies the same value as computed from its parent element.
Applies To
All positioned elements.
Syntax
inset = <''top''>{1,4} /* <length> values */ inset: 5px; /* value applied to all edges */ inset: 5px 10px; /* top/bottom left/right */ inset: 3px 5px 8px; /* top left/right bottom */ inset: 3.4em 5em 4em 4em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 15% 10% 10% 10%; /* Keyword value */ inset: auto;
CSS inset – Four Length Values
The following example demonstrates the use of inset property with four length values passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: sideways-rl; position: absolute; inset: 25px 45px 35px 15px; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - 4 values</span> </div> </body> </html>
CSS inset – Three Length Values
The following example demonstrates the use of inset property with three length values passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: sideways-rl; position: absolute; inset: 25px 35px 15px; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - 3 values</span> </div> </body> </html>
CSS inset – Two Length Values
The following example demonstrates the use of inset property with two length values passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: sideways-rl; position: absolute; inset: 25px 35px; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - 2 values</span> </div> </body> </html>
CSS inset – One Length Value
The following example demonstrates the use of inset property with just one length value passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: sideways-rl; position: absolute; inset: 35px; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - 1 value</span> </div> </body> </html>
CSS inset – Percentage Value
The following example demonstrates the use of inset property with two percentage values passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: sideways-rl; position: absolute; inset: 25% 35%; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - 2 % values</span> </div> </body> </html>
CSS inset – Mixed Values
The following example demonstrates the use of inset property with mixed values, i.e., one length and another as percentage values passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: sideways-rl; position: absolute; inset: 0.25em 10%; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - mixed values</span> </div> </body> </html>
CSS inset – auto Value
The following example demonstrates the use of inset property with auto value passed to it, which determines the top, right, bottom and left offset values.
<html> <head> <style> div { background-color: green; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: vertical-lr; position: absolute; inset: auto; background-color: greenyellow; } </style> </head> <body> <div> <span class="inset-ex">Inset - auto</span> </div> </body> </html>
CSS inset – Related Properties
The following table lists all the related properties of CSS inset:
Property | Description |
---|---|
bottom | Sets the vertical position of a positioned element at the bottom. |
left | Sets the horizontal position of a positioned element on the left side. |
right | Sets the horizontal position of a positioned element on the right side. |
top | Sets the vertical position of a positioned element at the top. |
margin | Shorthand for setting the margin of an element. |
inset-block | Specifies the logical block start and end offsets of an element. |
inset-inline | Specifies the logical block start and end offsets of an element in the inline direction. |
”;