CSS 'block-size' Property Explained

The CSS 'block-size' property specifies the size of an element in the block direction, the direction in which blocks (such as paragraphs) are stacked. In a horizontal writing mode (horizontal-tb, like English and most Western languages) it is the same as height, so it controls how tall an element is. In a vertical writing mode (vertical-rl or vertical-lr) it is the same as width. This property is particularly useful for layouts that need to adapt to different writing modes or when you want to set the size of a block-level element explicitly.

CSS 'block-size' Property Examples

See the Pen CSS 'block-size' Property by Webzstore (@webzstore) on CodePen.

The 'block-size' property offers a robust way to manage the block-axis dimensions of elements across different layouts and writing modes: height in horizontal writing modes and width in vertical ones, enhancing CSS's capabilities for responsive and internationalized web design.

Browser Support For 'block-size' Property

41.0	12.1	57.0	79.0	44.0

CSS Syntax of the 'block-size' Property

block-size: auto | <length-percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>);

.box {
  writing-mode: horizontal-tb;
  block-size: 200px;            /* same as height: 200px */
}

.vertical {
  writing-mode: vertical-rl;
  block-size: 200px;            /* same as width: 200px */
}

Usage of the 'block-size' Property

Use 'block-size' to explicitly set an element's size along the block axis: its height in horizontal writing modes and its width in vertical writing modes. This is especially relevant in responsive designs or when working with grid and flex layouts, where the size of elements may need to adjust based on content, viewport dimensions, or specific design requirements. The 'block-size' property is also essential when dealing with internationalization, as it helps manage layouts that involve different writing modes.

Property Values of the 'block-size' Property

• Auto: The browser calculates the block size. This is the default and is often based on the content size.
• Length: Defines the block size with a fixed size, using units such as pixels (px), ems (em), or any other length unit.
• min-content, max-content, fit-content: Content-based sizing keywords. min-content is the smallest size that fits the content without overflow, max-content is the ideal size for the content, and fit-content clamps between those and the available space.
• Percentage: Sets the block size relative to the block size of the containing block (its height in horizontal writing modes).
• Initial: Resets the 'block-size' to its default value (auto).
• Inherit: Inherits the 'block-size' from the parent element.