CSS block size
= CSS block size
{c}
<CSS block size> is a box's extent in the dimension perpendicular to text flow within a line. It corresponds to physical height in horizontal writing and physical width in vertical writing. The `block-size` property expresses that dimension without fixing one physical axis in its name.<CSS Writing Modes Level 4 by World Wide Web Consortium>[§6.1, block dimension and block size; §6.4, mappings]{ref}<CSS Logical Properties and Values Module Level 1 by World Wide Web Consortium>[§4.1, block-size and inline-size]{ref}
For an own example, `block-size: 80px; inline-size: 200px;` describes a $200$-by-$80$ <CSS pixel> rectangle in `horizontal-tb` and an $80$-by-$200$ rectangle in `vertical-lr`, under simple definite-size assumptions. The latter has block progression toward the right, but the dimension's magnitude remains eighty pixels.
Box edges matter. With `box-sizing: content-box; block-size: 20px;`, ten-pixel padding and two-pixel borders on both block sides give an outer block extent of
$$
20+2(10)+2(2)=44
$$
pixels. That outer extent is physical height in a horizontal writing mode and physical width in a vertical one. <CSS box-sizing> and the applicable constraints determine how the declared value relates to the content and border boxes.
The declaration `height: 50px; block-size: 80px;` also changes meaning with writing mode. In horizontal writing, both address physical height, so the later block-size wins when their other cascade priorities are equal. In vertical writing, height constrains the inline dimension while block-size constrains physical width; both values can apply independently.<CSS Logical Properties and Values Module Level 1 by World Wide Web Consortium>[§4, logical/physical property pairing and cascade; §4.1, size mapping]{ref}
<CSS block flow direction> identifies the direction in which blocks progress, whereas block size is a measurement along that axis. Moving from `vertical-rl` to `vertical-lr` changes the progression direction without swapping block size back to physical height.
An automatic block size can depend on content and layout, while min/max sizing properties can constrain the result. The useful interpretation is therefore an axis-relative size with the box-model and layout assumptions stated, not a universal promise that one declaration always fixes the painted rectangle exactly.