CSS block-size Property

❮ Previous Reference Next ❯


p {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 50px;

Hello World!


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
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


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;
❮ Previous Reference Next ❯