CSS Block-size Property

The block-size property in CSS specifies the size of an element along the block direction. In a horizontal writing mode, it behaves similarly to the height property.

Defines the size of an element along the block axis.
Behaves like height in horizontal writing modes and adapts to different writing modes.
Supports length values, percentages, and intrinsic sizing keywords for flexible layouts.

Syntax:

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

Property values

The block-size property in CSS defines the size of an element in the block dimension and can be set using length, percentage, or keywords like auto, initial, inherit, and unset.

length : Specifies the block size using fixed units such as px, em, or rem.
percentage : Sets the block size as a percentage of the containing block's size.
auto : Allows the browser to determine the block size automatically.
inherit : Inherits the block-size value from the parent element.
initial : Sets the property to its default value.
unset : Resets the property to its inherited value if inherited; otherwise, to its initial value.

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>CSS | block-size Property</title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }
        
        .geek {
            background-color: yellow;
            block-size: 40%;
            writing-mode: vertical-rl;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | block-size Property</b>
        <br><br>
        <div>
            <b class="geek">GeeksforGeeks</b>
        </div>
    </center>
</body>

</html>


<!--Driver Code Ends-->

block-size: 40% sets the element’s size in the block direction (height in horizontal writing mode, width in vertical).
writing-mode: vertical-rl rotates the text, showing how block-size adapts to different writing modes.

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<head>
    <title>CSS | block-size Property</title>
<!--Driver Code Ends-->

    <style>
        h1 {
            color: green;
        }
        
        p.geek { 
                width: 200px; 
                height: 200px; 
                border: 1px solid black; 
                writing-mode: horizontal-tb; 
                color: white; 
                background: green; 
                block-size: 250px;

            } 
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | block-size Property</b>
        <br><br>
        <div>
            <p class="geek">GeeksforGeeks</p>


        </div>
    </center>
</body>

</html>                    

<!--Driver Code Ends-->

block-size: 250px sets the block dimension (height in horizontal writing mode) to 250px, overriding the original height: 200px.
writing-mode: horizontal-tb keeps the text horizontal, showing that block-size works with different writing modes and can control the element’s main block dimension.

Property values

Explore