Block size

As explained in CSS in Depth, Second Edition

A CSS block size is an element dimension measured along the block axis of its writing mode.

Block size sets an element’s dimension along the block axis rather than directly specifying height. In horizontal writing, it corresponds to height; in vertical writing, it adapts to width. section 3.1.2

Writing-mode adaptation

Replace height with block-size when sizing should follow the document’s block direction. The same declaration can describe height in horizontal writing and width in vertical writing. section 3.1.2

Figure 3.5 Inline and block directions in various writing modes

Compare block and inline directions across writing modes to see which physical dimension block-size controls. section 3.1.2

How CSS in Depth, Second Edition covers it

How deep it goes

Defines block-size and contrasts it with height, stopping short of detailed sizing algorithms or conflict resolution.

Examples

Contrasts block-size with height in horizontal writing and width in vertical writing, using directional diagrams across writing modes.

What it assumes

Assumes familiarity with width and height while defining block and inline directions and their writing-mode dependence.

What you can do after

Apply it via CSS to size elements in a way that adapts when writing modes change.

How it connects

Connects block-size with logical properties, writing modes, block direction, inline direction, and inline-size.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

• height propertyequivalent to · A height property specifies or reports an element’s vertical dimension.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.