CSS - block-size Property

Quiz

CSS block-size property determines an element's horizontal or vertical size based on its writing mode. When the writing mode is vertical, the width of the element is affected; when the writing mode is horizontal, the height is affected.

Syntax

block-size: auto | length | percentage | initial | inherit;

Property Values

Value	Description
auto	It sets the element's default block size. Default value.
length	It sets the size of block in terms of px, cm, pt etc.
percentage	It sets the size of block in terms of percentage values.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Block Size Property

The following examples explain the block-size property with different values.

Block Size Property with Auto Value

To let the browser decide the size of the block, we use the auto value. The auto value sets the default value to block-size. In the following example, auto value has been used for block-size both with and without writing modes.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: lightgreen;
         border: solid black 1px;
         block-size: auto;
      }

      #auto-vertical {
         writing-mode: vertical-rl;
      }

      #auto-horizontal {
         writing-mode: horizontal-tb;
      }
   </style>
</head>

<body>

   <h2>
      CSS block-size property
   </h2>
   <p>
      a) Auto Block Size
   </p>
   <div >
      <p>
         This is a p tag with auto block size
      </p>
   </div>
   <p>
      b) Auto Block Size with 
      Vertical Writing Mode
   </p>
   <div id="auto-vertical">
      <p>
         This is p tag with auto block size 
         and vertical writing mode.
      </p>
   </div>
   <p>
      c) Auto Block Size with 
      Horizontal Writing Mode
   </p>
   <div id="auto-horizontal">
      <p>
         This is p tag with auto block size
         and horizontal writing mode.
      </p>
   </div>

</body>

</html>
</html>

Block Size Property with Length Value

To set the size of the block as per our choice, we can specify the size in terms of length (eg. 10px, 25px etc.). In the following example, 80px size has been used for block-size both with and without writing modes.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: lightgreen;
         border: solid black 1px;
         block-size: 80px;
      }

      #length-vertical {
         writing-mode: vertical-rl;
      }

      #length-horizontal {
         writing-mode: horizontal-tb;
      }
   </style>
</head>

<body>

   <h2>
      CSS block-size property
   </h2>
   <p>
      a) 80px  Block Size
   </p>
   <div >
      <p>
         This is a p tag with 80px block size
      </p>
   </div>
   <p>
      b) 80px Block Size with 
      Vertical Writing Mode</p>
   <div id="length-vertical">
      <p>
         This is p tag with 80px block size 
         and vertical writing mode.
      </p>
   </div>
   <p>
      c) 80px Block Size with 
      Horizontal Writing Mode
   </p>
   <div id="length-horizontal">
      <p>
         This is p tag with 80px block size
         and horizontal writing mode.
      </p>
   </div>

</body>

</html>
</html>

Block Size Property with Percentage Value

To set the size of the block as per our choice, we can specify the size in terms of percentage (eg. 10%, 15% etc.). In the following example, 40% size has been used for block-size both with and without writing modes.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         height: 100vh;
      }

      div {
         background-color: lightgreen;
         border: solid black 1px;
         block-size: 40%;
      }

      #percent-vertical {
         writing-mode: vertical-rl;
      }

      #percent-horizontal {
         writing-mode: horizontal-tb;
      }
   </style>
</head>

<body>

   <h2>
      CSS block-size property
   </h2>
   <p>
      a) 40% Block Size
   </p>
   <div>
      <p>
         This is a p tag with 40% block size
      </p>
   </div>
   <p>
      b) 40% Block Size with 
      Vertical Writing Mode
   </p>
   <div id="percent-vertical">
      <p>
         This is p tag with 40% 
         block size and vertical writing mode.
      </p>
   </div>
   <p>
      c) 40% Block Size with 
      Horizontal Writing Mode
   </p>
   <div id="percent-horizontal">
      <p>
         This is p tag with 40% 
         block size and horizontal writing mode.
      </p>
   </div>

</body>

</html>

</html>

Supported Browsers

Property
block-size	57.0	79.0	41.0	12.1	44.0

css_properties_reference.htm

Print Page