Skip to content
Related Articles

Related Articles

Improve Article

CSS | min-block-size Property

  • Last Updated : 16 Apr, 2020
Geek Week

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:




<!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:




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

Output:

Supported Browsers: The browsers supported by min-block-size property are listed below:

  • Firefox
  • Google Chrome
  • Edge
  • Opera

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size




My Personal Notes arrow_drop_up
Recommended Articles
Page :