The CSS inset-block-start property specifies the offset of a positioned element from the block-start edge of its containing block. It adapts automatically to different writing modes and text directions.
- Sets the offset from the block-start edge.
- Works with positioned elements.
- Adapts to different writing modes and text directions.
- Logical equivalent of the top property.
Syntax:
inset-block-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-block-start property in CSS
Here are some examples:
Example 1: The inset-block-start: 0 property positions the green bar at the block-start edge (top) of the container.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | inset-block-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: 10px;
}
h2 {
font-size: 18px;
margin-bottom: 35px;
}
.container {
position: relative;
width: 200px;
height: 70px;
margin: auto;
background-color: turquoise;
}
.box {
position: absolute;
inset-block-start: 0;
left: 0;
width: 100%;
height: 10px;
background-color: green;
}
.text {
padding-top: 10px;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>CSS | inset-block-start Property</h2>
<div class="container">
<div class="box"></div>
<div class="text">
A Computer Science<br>
Portal for Geeks
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The inset-block-start: 0 property positions the cyan box at the block-start edge of the green container.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | inset-block-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;
margin-bottom: 15px;
}
.container {
position: relative;
width: 190px;
height: 95px;
margin: auto;
background: green;
}
.box {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 50px;
height: 95px;
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-block-start Property</h2>
<div class="container">
<div class="box">
A Computer Science Portal for Geeks
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->