block-size

block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical.

.element {
  block-size: 700px;
  writing-mode: vertical-lr;
}

block-size is defined in the CSS Logical Properties and Values Level 1 specification which is currently in Editor’s Draft.

Syntax

block-size: <'width'>;

• Initial: auto
• Applies to: same as height and width
• Inherited: no
• Percentages: as for the corresponding physical property
• Computed value: same as height and width
• Animation type: by computed value type such as length, calc(), etc.

Values

/* Length values */
block-size: 110px;
block-size: 2rem;

/* Percentage values */
block-size: 75%;

/* Keyword values */
block-size: auto;
block-size: fit-content(15em);
block-size: max-content;
block-size: min-content;

/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;
block-size: revert;

In most cases, you’ll likely find yourself using a number (e.g. 50px) for the block-size value, but there are a few keyword values that are worth noting:

• auto: The element’s block size is the size of its parent element.
• fit-content(): A function that allows a container to grow until a desired size, then make the text wrap, effectively clamping the content. It can be used on grid containers, as well as box sizing, and while caniuse shows strong support for it used with this property, our testing was less conclusive. That could be due to the Box Sizing Module Level 3 spec being in Editor’s Draft status at this time of writing.
• max-content: The intrinsic preferred width, meaning the element stretches the text out as long as it can possibly be and makes the containing box exactly as long as the text.
• min-content: The intrinsic minimum width, meaning the element’s box reduces to the minimum size of its content. In other words, the containing box is as wide as the largest string of text it holds.

Let’s talk block vs. inline

block-size is related to inline-size, which defines the opposite direction. If we’re assuming a left-to-right (LTR) writing direction, then you can think of block-size as logical equivalent to height, and inline-size the logical equivalent to width.

Another way to think of it: the difference between block and inline elements. When we talk about block-level elements (e.g. <div>, <main>, <header>, <article>, etc.), we mean elements that take up the entire horizontal space of its container. When we talk about inline-level elements (<span>, <a> <strong>, <em>, etc.), we mean elements that are only as wide as the content they contain. Block elements can only grow vertically since they already take up all of the width available to them, so setting block-size is like telling an element how tall it can grow.

Conversely, the inline-size defines the inline, or horizontal, width of an element.

Now let’s talk about writing modes

We can’t have a discussion about any logical property — including block-size — without getting into the fundamental concept of writing modes in CSS.

At its (absolutely) most basic, the writing mode is what direction text flows inside an element, or the entire document. The writing-mode property is used to change the direction, which can be vertical or horizontal and set to either left-to-right or right-to-left.

Let’s look at a simple example just to illustrate the point. When setting a horizontal writing-mode, the block-size increases the height of the element:

Similarly, when the writing-mode of the text is vertical, the block-size increases the width of the container.

But if we use height instead of block-size, the paragraph maintains its 300px height, but in a horizontal direction as though we declared width instead.

See that? block-size is smart! It changes from height to width, depending on the writing-mode value.

Jen Simmons has an article and presentation that go deeper into CSS writing modes.

Declaring an explicit width or height overrides block-size

But wait! You might be wondering whether a logical property like block-size works alongside physical properties, like width and height. They do… but beware because:

Declaring an explicit width or height value on the element overrides the block-size property value.

Going back to our last example, if a paragraph element is 300px wide using width and the writing mode is set to vertical-lr, the content rotates, changing the layout. But that paragraph remains 300px wide instead of 300px tall.

Case in point:

.element {
  block-size: 300px
  width: 800px;
  writing-mode: vertical-lr;
}

It’s natural to think the element in this example is 300px wide because it’s 300px in a horizontal writing mode. But it actually becomes 800px wide because we’ve explicitly declared width: 800px on the element… and that overrides the block-size value of 300px just in the vertical writing mode.

That may very well be exactly what you want this to do! But, if not, it’s a good idea to avoid declaring a width or height when working with block-size (or inline-size for that matter).

Demo

Browser support

IE	Edge	Firefox	Chrome	Safari	Opera
No	79+	41+	57	12.1+	44+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	All	92+	12.2+	64+

Note that support for using the following functions may differ from support of the block-size property:

• fit-content()
• max-content()
• min-content()

More information

Related