CSS block-size Property

Description

The block-size CSS property is a part of the CSS Logical Properties module, introduced to provide greater flexibility in responsive web design. It allows you to define the size of an element in the inline dimension, which is usually the height in a horizontal writing mode or the width in a vertical writing mode. By using block-size, you can create layouts that adapt to different screen sizes and orientations more easily, ensuring a consistent and responsive user experience. This property simplifies the process of designing websites for various contexts and is particularly valuable when working with non-standard writing modes or when dealing with content that needs to be presented differently based on the available space.

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;

Syntax

block-size: <width>

Values

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

Example

<p class="exampleText">Example text</p>

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}

Browser Support

The following table will show you the current browser support for the CSS block-size property.

Desktop
79	57	41	44	12.1

Tablets / Mobile
57	41	43	12.2	5	57

Last updated by CSSPortal on: 1st January 2024