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