PLAY CSS
jaen

Box

block-size

block-size sets the size of an element in the direction its lines stack. In horizontal text it works like height, and in vertical text like width.

Syntax

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  writing-mode: vertical-rl;
  block-size: 200px;
}

Controls

block-size200px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

  • A length such as 200px: uses that size. Content that does not fit overflows the box.
  • auto: the initial value. Grows and shrinks with the number of lines inside.
  • min-content, max-content, fit-content: for a normal box of text, all of them fit the content (the same as auto).

The preview box uses vertical text (writing-mode: vertical-rl), so lines stack from right to left and block-size sets the width of the box. With auto the width fits the number of columns, and with a length, columns that do not fit are cut off on the left (the preview box hides overflowing content). Remove the helper writing-mode from the code to switch to horizontal text, where block-size sets the height.

When to use it

Use it on pages that switch between vertical and horizontal text, to size the direction lines stack in with a single declaration. Together with inline-size, the box keeps the same shape relative to the text in either direction.

Watch out

  • It sets the same thing as height in horizontal text and width in vertical text, so if you write both, the later one wins.
  • % is a share of the parent's size in the same direction (the height, in horizontal text). In horizontal text, it behaves like auto when the parent's height is not fixed.
  • For the minimum and maximum, use min-block-size and max-block-size, which work like min-height and max-height.

References

MDN Web Docsblock-sizeSpecificationCSS Logical Properties and Values Level 1Can I useblock-size

Comments

PLAY CSS