CSS block-size Property
Example
p {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 50px;
}Hello World!
Meaning:
The block-size CSS property specifies the horizontal or vertical size of an element's block, depending on its writing mode.
It corresponds to either the width or the height property, depending on the value of writing-mode.
If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element.
A related property is inline-size, which defines the other dimension of the element.
| Default value: | auto |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
block-size: auto|length|percentage|max-content|min-content|fit-content(length|percentage)|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| auto | This is default value. The browser will calculate the width/height for the specified element on the basis of the values of other properties. |
| length | Specifies the width/height as a length value in px, pt, cm, em, etc. Negative length values are not allowed. |
| percentage | Specifies the width/height in percentage. The percentage is calculated with respect to the width/height of the element's containing block. Negative percentage values are not allowed. |
| max-content | The intrinsic preferred width/height. |
| min-content | The intrinsic minimum width/height. |
| fit-content(length|percentage) | Uses the fit-content formula with the available space replaced by the specified argument. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
block-size: auto;
}