CSS block-size Property

What You’ll Learn

The block-size property sets an element’s size along the block axis — the direction text flows in blocks. In everyday horizontal layouts, that usually means height. It is part of CSS logical sizing, which adapts better to different writing modes.

Definition and Usage

The block-size CSS property controls the size of an element in the block dimension. In horizontal writing modes such as English, the block axis runs top to bottom, so block-size behaves like height.

In vertical writing modes, the block axis runs sideways, so the same property controls width instead. That makes block-size useful for international layouts and components that must work in more than one writing direction.

📝 Syntax

Write block-size with a length, percentage, or sizing keyword:

selector {
  block-size: <length> | <percentage> | auto | max-content | min-content | fit-content;
}

Basic Example

.box {
  block-size: 200px;
  background-color: lightblue;
}

Syntax Rules

• The initial value is auto, which sizes the element based on content and other CSS rules.
• Length values such as px, rem, and vh set a fixed block size.
• Percentages are relative to the containing block’s block size.
• Keywords like min-content, max-content, and fit-content size from content.
• Use min-block-size and max-block-size to add lower and upper limits.

Default Value

The default value of block-size is auto. That means the browser calculates the block dimension from the element’s content, padding, borders, margins, and related sizing properties such as min-block-size and max-block-size.

💎 Property Values

These are the most common values you will use with block-size.

Block Size and Writing Modes

block-size follows the writing mode instead of always mapping to vertical height. That is the main reason to choose it over physical properties like height and width.

• inline-size is the logical counterpart for the inline axis (usually width in English).
• min-block-size and max-block-size set lower and upper limits on the block axis.
• Logical properties help components stay correct when text direction or writing mode changes.

block-size vs height

Examples Gallery

Try block-size with fixed lengths, percentages, content keywords, and vertical writing mode.

<style>
  .box {
    block-size: 200px;
    background-color: lightblue;
  }
</style>

<div class="box">
  This box has a block size of 200px.
</div>

<style>
  .parent {
    block-size: 240px;
    background: #f1f5f9;
  }
  .child {
    block-size: 50%;
    background: #93c5fd;
  }
</style>

<div class="parent">
  <div class="child">50% block size</div>
</div>

.auto { block-size: auto; }
.min { block-size: min-content; }
.fit { block-size: fit-content; }

.vertical-panel {
  writing-mode: vertical-rl;
  block-size: 180px;
  background: #ddd6fe;
  padding: 1rem;
}

💡 Best Practices