CSS | min-block-size Property

Last Updated : 29 Aug, 2022

The min-block-size property in CSS is used to create the minimum horizontal or vertical size of an element. If the writing direction is horizontal then min-block-size is equivalent to min-height property, and if it is in vertical mode then equal to min-width property.

Syntax:

min-block-size: length| percentage| auto| none| min-content| 
                max-content| fit-content| inherit| initial| unset;

Property values:

length: It sets a fixed value defined in px, cm, pt etc. Negative values are also allowed. Its default value is 0px.
percentage (%): It is the same as length but the size is set in term of percentage of the window size.
auto: It is used when it is desired that the browser determines the block-size.
none: It is used when you don't want to limit on the size of the box.
max-content: It is used when you preferred min-width on the size of the box.
min-content: It is used when you preferred min-width on the size of the box.
fit-content: It is used when you preferred exact-width on the size of the box.
initial: It is used to set the value of the min-block-size property to its default value.
inherit: It is used when it is desired that the element inherits the min-block-size property from its parent element.
unset: It is used to unset the default mix-block-size.

Below examples illustrate the min-block-size property in CSS:

Example 1:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS | min-block-size Property</title> 
    <style> 
        h1 { 
            color: green; 
        } 
        
        div { 
            background-color: green; 
            width: 200px; 
            height: 20px; 
        } 
        
        .one { 
            position: relative; 
            min-block-size: 10px; 
            background-color: cyan; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <h1>Geeksforgeeks</h1> 
        <b>CSS | min-block-size Property</b> 
        <br><br> 
        <div> 
            <p class="one"> 
                A Computer Science Portal for Geeks 
            </p> 
        </div> 
    </center> 
</body> 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS | min-block-size Property</title> 
    <style> 
        h1 { 
            color: green; 
        } 
        
        div { 
            background-color: green; 
            width: 200px; 
            height: 20px; 
        } 
        
        .one { 
            position: relative; 
                        writing-mode: vertical-rl;
            min-block-size: auto; 
            background-color: cyan; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <h1>Geeksforgeeks</h1> 
        <b>CSS | min-block-size Property</b> 
        <br><br> 
        <div> 
            <p class="one"> 
                A Computer Science Portal for Geeks 
            </p> 
        </div> 
    </center> 
</body> 
</html>