block-size
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
The block-size
CSS property defines 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.
Try it
Syntax
css
/* <length> values */
block-size: 300px;
block-size: 25em;
block-size: anchor-size(height);
block-size: calc(anchor-size(--myAnchor block) * 0.75);
/* <percentage> values */
block-size: 75%;
/* Keyword values */
block-size: max-content;
block-size: min-content;
block-size: fit-content;
block-size: fit-content(20em);
block-size: auto;
/* Global values */
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;
Values
Formal definition
Initial value | auto |
---|---|
Applies to | same as width and height |
Inherited | no |
Percentages | block-size of containing block |
Computed value | same as width and height |
Animation type | a length, percentage or calc(); |
Formal syntax
block-size =
<'width'>
<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Examples
Block size with vertical text
HTML
html
<p class="exampleText">Example text</p>
CSS
css
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
Result
Specifications
Specification |
---|
CSS Logical Properties and Values Level 1 # dimension-properties |
CSS Box Sizing Module Level 4 # sizing-values |
Browser compatibility
BCD tables only load in the browser
See also
- The mapped physical properties:
width
andheight
writing-mode