PUBLISHED ON: APRIL 12, 2021
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().
