CSS inset Property
The inset property in CSS is a shorthand property that corresponds to the right, top, left, and bottom properties. It has the same multi-value syntax as the margin shorthand property.
In some parts of the CSS logical properties specification, it does not determine the logical offsets.
It defines the physical offsets, despite the writing mode, text orientation, and directionality value of the element. This property takes up the same values as the left property.
Syntax
<'top'>{1,4}
Example: CSS inset Property
Here in this example, we are using the inset property to position our text inside the container using the values of this property, which decides the margin of the container. Here, we have given the value as 20px 40px 30px 10px. Hence, our text gets aligned inside the container according to the different margin values specified by us.
<!DOCTYPE html>
<html>
<head>
<title>The inset property in CSS</title>
<style type="text/css">
div {
background-color: pink;
width: 150px;
height: 120px;
position: relative;
color: blue;
}
.exampleText {
writing-mode: sideways-rl;
position: absolute;
inset: 20px 40px 30px 10px;
background-color: #f8fc08;
}
</style>
</head>
<body>
<div> <span class="exampleText">Study Tonight</span>
</div>
</body>
</html>
Output
Example 2: CSS inset Property
Here in the second example, we have given the inset property value as 4px 8px. Hence, the text gets aligned inside the container according to the margin values specified by us.
<!DOCTYPE html>
<html>
<head>
<title>The inset property in CSS</title>
<style type="text/css">
div {
background-color: deeppink;
width: 150px;
height: 120px;
position: relative;
color: yellow;
}
.exampleText {
writing-mode: horizontal-tb;
position: absolute;
inset: 4px 8px;
background-color: #ff8cfc;
}
</style>
</head>
<body>
<div> <span class="exampleText">Study Tonight</span>
</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 |
66 |
66 |
| Internet Explorer |
no |
no |
| Opera |
73 |
73 |
| Safari |
no |
no |
| Webview Android |
87 |
87 |
| Chrome Android |
87 |
87 |
| Firefox Android |
66 |
66 |
| 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 is relative to the size of the containing block in the corresponding axis. The computed value for this property is the same as box offsets like top, left, right and bottom properties, only the directions are logical. The animation type for this property is a length, or a percentage or calc().
