CSS block-size Property
CSS block-size property determines the vertical or the horizontal size of the block of an element, based on its writing mode. It refers to either the width or height property, based on the value of writing mode.
In case the writing mode having a vertical orientation, then the value of the black size is related to the width of the element, or else it is relative to the height of the element. Inline size property is relative, which determines the other dimension of the element.
Syntax for block-size Property
Following is the syntax for the background-size property.
block-size: length|percentage|auto|inherit|initial|unset
Example: CSS block-size Property
In the example below, we are using the block-size property with different background positions, borders, and different values. In this case, we have given the block-size as 250px i.e; the length value.
The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.
<!DOCTYPE html>
<head>
<title>Block size property in CSS</title>
<style type="text/css">
.exampleText {
writing-mode: vertical-rl;
background-color: red;
block-size: 250px;
}
</style>
</head>
<body>
<p class="exampleText">Welcome To Study Tonight!</p>
</body>
</html>
Output:
Example 2: CSS block-size Property
In the example below, we are using the block-size property with different background positions, borders, and different values. In this case, we have given the block size as the horizontal style.
<!DOCTYPE html>
<head>
<title>Block size property in CSS</title>
<style type="text/css">
.exampleText {
writing-mode: vertical-rl;
background-color: pink;
block-size: 100px;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<p class="exampleText">Welcome To Study Tonight!</p>
</body>
</html>
Output:
Example 3: CSS block-size Property with the auto value
In the example below, we are using the block-size property with different background positions, borders, and different values. In this case, we have given the block size as auto value.
<!DOCTYPE html>
<head>
<title>Block size property in CSS</title>
<style type="text/css">
.exampleText {
background-color: pink;
block-size: auto;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<p class="exampleText">Welcome To Study Tonight!</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
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. 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 block-size property is auto. This property is applicable to the same width and height. It is not an inherited property. Percentages refer to the block size of the containing block. The computed value of this property is the same as that of width and height. The animation type of this property is a length or a percentage or calc().
