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().