Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS inset-block Property

The inset-block property in CSS is known for defining the logical block start and the offsets of an element, which gets mapped to the physical offsets on the basis of the writing mode, text orientation, and the directionality of the element.

This property is a shorthand property for the CSS properties like- inset-block-end and inset-block-start properties. This property takes up the same values as the left property.

Syntax

inset-block: length | percentage | auto | inherit | initial | unset;

Example: CSS inset-block Property

Here in the example below, we are using the inset-block property to set or position our text inside the container using different values of the property. Here, we have given the values as 20px 50px. Hence, our text gets positioned in a way inside the container according to the values given by us.

<!DOCTYPE html>
<html>
<head>
	<title>The inset-block property in CSS</title>
	<style type="text/css">
		div {
	  background-color: deeppink;
	  width: 120px;
	  height: 120px;
	  color: purple;
	}
	
	.exampleText {
	  writing-mode: vertical-lr;
	  position: relative;
	  inset-block: 20px 50px;
	  background-color: #ffc8fc;
	}
	</style>
</head>
<body>
	<div>
		<p class="exampleText">Example text</p>
	</div>
</body>
</html>

Output

Example 2: CSS inset-block Property

Here in this second example, we have given the inset-block property value as auto. So the text gets aligned in the way according to the values given by us.

<!DOCTYPE html>
<html>
<head>
	<title>The inset-block property in CSS</title>
	<style type="text/css">
		div {
	  background-color: deeppink;
	  width: 120px;
	  height: 120px;
	  color: purple;
	}
	
	.exampleText {
	  writing-mode: horizontal-tb;
	  position: relative;
	  inset-block: auto;
	  background-color: #ffc8fc;
	}
	</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 height of the containing block. The computed value for this property is the same as box offset properties. The animation type for this property is a length, a percentage, or calc().