CSS - inset-inline-start
The CSS property inset-inline-start determines the logical inline start inset of an element. It depends upon the writing mode, direction and text orientation of the element for a physical offset. It relates to the top and bottom, or left or right CSS properties.
Possible Values
The CSS property inset-inline-start 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-inline-start = auto | <length-percentage> /* <length> values */ inset-inline-start: 5px; inset-inline-start: 3.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 15%; /* Keyword value */ inset-inline-start: auto;
CSS inset-inline-start - Setting Offset
The following example demonstrates the use of inset-inline-start property with a length value passed to it, which determines the inline start offset value.
<html> <head> <style> div { background-color: coral; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: horizontal-tb; position: absolute; inset-inline-start: 50px; background-color: cornsilk; } </style> </head> <body> <div> <span class="inset-ex">inset-inline-start</span> </div> </body> </html>
CSS inset-inline-start - Percentage Value
The following example demonstrates the use of inset-inline-start property with a percentage value passed to it, which determines the inline start offset value. The writing mode is set as horizontal-tb.
<html> <head> <style> div { background-color: coral; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: horizontal-tb; position: absolute; inset-inline-start: 30%; background-color: cornsilk; } </style> </head> <body> <div> <span class="inset-ex">inset-inline-start</span> </div> </body> </html>
CSS inset-inline-start - With direction
The following example demonstrates the use of inset-inline-start property with writing-mode as vertical-lr and text-orientation as rtl.
<html> <head> <style> div { background-color: coral; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: vertical-lr; direction: rtl; position: absolute; inset-inline-start: 1.5em; background-color: cornsilk; } </style> </head> <body> <div> <span class="inset-ex">inset-inline-start</span> </div> </body> </html>
CSS inset-inline-start - auto Value
The following example demonstrates the use of inset-inline-start property with auto as value passed to it, which determines the inline start offset value. The writing mode is also set as horizontal-tb.
<html> <head> <style> div { background-color: coral; width: 180px; height: 120px; position: relative; } .inset-ex { writing-mode: horizontal-tb; position: absolute; inset-inline-start: auto; background-color: cornsilk; } </style> </head> <body> <div> <span class="inset-ex">inset-inline-start</span> </div> </body> </html>
To Continue Learning Please Login
Login with Google