PUBLISHED ON: APRIL 12, 2021
CSS inset-inline Property
The inset-inline property in CSS is known for defining the logical start and end offsets of an element in inline direction, which gets mapped to the physical offsets on the basis of the writing mode, text orientation, and directionality of the element.
This property is a shorthand property for the CSS properties like- inset-inline-end and inset-inline-start properties. This property takes up the same values as the left property.
Syntax
inset-inline: length|percentage|auto|inherit|initial|unset;
Example: CSS inset-inline Property
Here in the example below, we are using the inset-inline property to position our text inside the container according to the values specified. Here, we have given the inset-inline value as 30px 50px. This value acts as the margin for our text to get placed inside the container.
<!DOCTYPE html>
<html>
<head>
<title>The inset-inline property in CSS</title>
<style type="text/css">
div {
background-color: lime;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
position: relative;
inset-inline: 30px 50px;
background-color: #ffc8fc;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</p>
</div>
</body>
</html>
Output
Example 2: CSS inset-inline Property
Here in this second example, we have given the inset-inline property value as auto. This auto value means the default value of this property by which the text gets positioned at the starting position of the container block.
<!DOCTYPE html>
<html>
<head>
<title>The inset-inline property in CSS</title>
<style type="text/css">
div {
background-color: green;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: horizontal-tb;
position: relative;
inset-inline: auto;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<p class="exampleText">Study Tonight</p>
</div>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
87 |
87 |
| Edge |
79 |
79 |
| Firefox |
63 |
63 |
| Internet Explorer |
no |
no |
| Opera |
73 |
73 |
| Safari |
no |
no |
| Webview Android |
87 |
87 |
| Chrome Android |
87 |
87 |
| Firefox Android |
63 |
63 |
| Opera Android |
48 |
48 |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
This property is applicable to the positioned elements. It is not an inherited property. The percentage value refers to the logical width of the containing block. The computed value for this property is the same as box offsets like top, left, right and bottom properties, only the directions are logical.
