CSS properties - block-size

revision:

block-size property

The block-size property specifies the size of an element in the block direction.

The related CSS property writing-mode defines block direction, and this affects the result of the block-size property. For pages in English, block direction is downward and inline direction is left to right.

The CSS "block-size" and "inline-size" properties are very similar to CSS properties "width" and "height", but the block-size and inline-size properties are dependent on block and inline directions.

CSS syntax : inset-block: auto | value | initial | inherit;

Property values

auto : default. The element's default block-size value.

value : specifies block-size in px, pt, cm, etc.

% : specifies block-size in percent relative to the size of parent element on the corresponding axis.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.blockSize="100px"

example: block-size property
this is a div element
this is a div element
code: 
                    <div class="grid">
                        <div id="div1">this is a div element</div>
                        <div id="div2">this is a div element</div>
                    </div>
                    <style>
                    #div1 { background-color: lightblue; border: solid black 0.2vw; width: 10vw;  block-size: 20vw;}
                    #div2 { background-color: lightgreen; border: solid blue 0.2vw; writing-mode: vertical-rl;  block-size: 20vw;}
                    </style>