CSS block-size Property


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
Applies to
same as width and height
block-size of containing block
Computed value
same as width and height
a length, percentage or calc();
JavaScript syntax

Interactive Demo

Demo of the block-size property.


block-size: <width>


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


<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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024