The CSS inset-inline-start property specifies the offset of a positioned element from the inline-start edge of its containing block. It automatically adapts to different writing modes and text directions.
- Sets the offset from the inline-start edge.
- Works with positioned elements.
- Adapts to different writing modes and text directions.
- Logical equivalent of the left property in left-to-right layouts.
Syntax:
inset-inline-start: auto | length | percentage | inherit | initial | unset;Property values
- auto: Uses the browser's default positioning.
- length: Sets a fixed offset value.
- percentage: Sets the offset as a percentage of the containing block.
- inherit: Inherits the value from the parent element.
- initial: Sets the property to its default value (auto).
- unset: Resets the property to its inherited or initial value.
Examples of inset-inline-start Property
Below example illustrate the inset-inline-start property in CSS:
Example 1: The inset-inline-start: 10px property positions the cyan box 10 pixels away from the inline-start edge of its containing block.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | inset-inline-start Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #e6e6e6;
text-align: center;
font-family: "Times New Roman", serif;
}
h1 {
color: green;
font-size: 32px;
margin-bottom: 15px;
}
.container {
position: relative;
width: 220px;
height: 40px;
margin: auto;
}
.box {
position: absolute;
inset-inline-start: 10px;
inset-block-start: 0;
width: 200px;
height: 40px;
background: cyan;
font-size: 18px;
line-height: 1.1;
}
.bar {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
width: 10px;
height: 20px;
background: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>CSS | inset-inline-start Property</h2>
<div class="container">
<div class="bar"></div>
<div class="box">
A Computer Science<br>
Portal for Geeks
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The inset-inline-start: 15px property positions the cyan box 15 pixels away from the inline-start edge of the green container.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | inset-inline-start Property</title>
<!--Driver Code Ends-->
<style>
body {
background: #e6e6e6;
text-align: center;
font-family: "Times New Roman", serif;
}
h1 {
color: green;
font-size: 32px;
}
.container {
position: relative;
width: 200px;
height: 120px;
margin: auto;
background: green;
}
.box {
position: absolute;
inset-inline-start: 15px;
inset-block-start: 30px;
width: 55px;
height: 120px;
background: cyan;
writing-mode: vertical-rl;
text-align: center;
font-size: 16px;
line-height: 1.1;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>CSS | inset-inline-start Property</h2>
<div class="container">
<div class="box">
A Computer Science Portal for Geeks
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->