CSS block-size Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The block-size CSS property is a modern, logical way to control the dimension of an element along the block axis of the writing mode in use. Unlike traditional properties such as height, which explicitly target the vertical dimension, block-size adapts automatically to the writing mode, text direction, and text orientation. In horizontal writing modes, the block axis corresponds to the vertical direction, while in vertical writing modes, it corresponds to the horizontal direction. This makes block-size particularly useful for responsive design and internationalization, as it allows elements to resize correctly across different languages and writing systems without needing to redefine separate width or height values.

Using block-size can simplify layout management when combined with other logical properties, such as inline-size. Together, these properties provide a more consistent and predictable approach to dimensioning elements across varying writing modes and container orientations. For example, when designing a multilingual website, a text container’s block dimension can remain consistent whether the content flows top-to-bottom or left-to-right. This logical approach reduces the need for complex media queries or conditional CSS rules, which traditionally relied on absolute dimensions using height and width.

Additionally, block-size integrates seamlessly with CSS layout models, including Flexbox, Grid, and multi-column layouts. In a Flexbox container, for instance, an element’s block-size can be used to define its growth along the cross axis without disrupting the flow along the main axis. Similarly, in a grid layout, specifying block-size for grid items can help maintain proportional spacing and alignment while respecting the grid tracks. This property also works well with other box model properties such as min-block-size and max-block-size, allowing designers to create adaptable, constraint-based designs that maintain both flexibility and visual stability.

Definition

Initial value: auto
Applies to: same as width and height
Inherited: block-size of containing block
Computed value: same as width and height
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.blockSize

Interactive Demo

block-size: 150px;
writing-mode: horizontal-tb;

block-size: 150px;
writing-mode: vertical-rl;

block-size: auto;
writing-mode: horizontal-tb;

block-size: auto;
writing-mode: vertical-lr;

Demo of the block-size property.

Syntax

block-size: <width>

Values

<width>The block-size property takes the same values as the width and height properties.

Example

HTML

<div class="container">

    <h1>CSS block-size examples</h1>



    <div class="examples">

        <section class="example">

            <h2>Horizontal writing mode (block-size controls height)</h2>

            <div class="box horizontal">This box uses <code>block-size: 120px;</code>. In a horizontal writing mode the block-size maps to the element's height.</div>

        </section>



        <section class="example">

            <h2>Vertical writing mode (block-size controls width)</h2>

            <div class="box vertical">This box uses <code>block-size: 8rem;</code> and <code>writing-mode: vertical-rl;</code>. In a vertical writing mode the block-size maps to the element's inline dimension (visually its width).</div>

        </section>

    </div>

</div>

CSS

/* Page layout */
:root {
    --accent: #2563eb;
    --muted: #f3f4f6;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
    color: #0f172a;
    padding: 32px;
}

.container {
    max-width: 980px;
    margin: 0 auto;
}

h1 {
    margin: 0 0 20px 0;
    font-size: 20px;
}

.examples {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.example {
    flex: 1 1 320px;
    background: var(--muted);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}

.example h2 {
    margin: 0 0 12px 0;
    font-size: 14px;
}

.box {
    padding: 12px;
    border: 2px solid rgba(37,99,235,0.14);
    background: rgba(37,99,235,0.06);
    border-radius: 6px;
    box-sizing: border-box;
    overflow: auto;
    font-size: 13px;
    line-height: 1.4;
}

/* Example 1: horizontal writing mode (default) */
.box.horizontal {
    /* block-size sets the height in horizontal writing mode */
    block-size: 120px;
    /* set an inline-size (width) to make the box proportionate */
    inline-size: 240px;
}

/* Example 2: vertical writing mode */
.box.vertical {
    /* change writing mode to vertical-right-to-left */
    writing-mode: vertical-rl;
    /* in vertical writing mode block-size affects the element's width (visual inline dimension) */
    block-size: 8rem;
    /* set a block flow inline-size (visual height) for readability */
    inline-size: 12rem;
}

/* small code formatting inside the content */
.box code {
    background: rgba(2,6,23,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    font-size: 12px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS block-size property. Hover over a browser icon to see the version that first introduced support for this CSS property.