CSS inline-size Property

The inline-size property in CSS is known for defining the horizontal or vertical size of the block of an element, which depends on its writing mode. This property corresponds to either the height or the width of the property on the basis of the value of writing mode.

In case the writing mode is vertically oriented, the value of inline-size refers to the height of the element, or else it refers to the width of the element.

Syntax

<'width'>

Example: CSS inline-size Property

Here, in this example below, we are using the inline-size property which defines the horizontal and vertical size of the block of an element according to the values specified by us like for example, here we have given the value as 110px.

<!DOCTYPE html>
<html>
<head>
	<title>The inline-size property in CSS</title>
	<style type="text/css">
		.exampleText {
		  writing-mode: vertical-rl;
		  background-color: red;
		  inline-size: 110px;
		}
	</style>
</head>
<body>
	<p class="exampleText">Example text</p>
</body>
</html>

Output

Example 2: CSS inline-size Property

Here in this second example, we have given the inline-size property value as auto. Hence, our text gets set inside the container block according to the horizontal and vertical size specified by us using the inline-size value.

<!DOCTYPE html>
<html>
<head>
	<title>The inline-size property in CSS</title>
	<style type="text/css">
		.exampleText {
		  background-color: skyblue;
		  inline-size: auto;
		writing-mode: horizontal-tb;
		color: deeppink;
		}
	</style>
</head>
<body>
	<p class="exampleText">Example text</p>
</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 57 57
Edge 79 79
Firefox 41 41
Internet Explorer no no
Opera 44 44
Safari 12.1 12.1
Webview Android 57 57
Chrome Android 57 57
Firefox Android 41 41
Opera Android 43 43
IOS Safari 12.2 12.2
Samsung Internet 5.0 5.0

Conclusion

The initial value for the inline-size property in CSS is auto. This property is applicable to the same height and width. It is not an inherited property. The percentage value refers to the inline size of the containing block. The computed value for this property is the same as width and height. The animation type for this property is a length or a percentage or calc().