min block size Property

Written by

in

CSS min-block-size property sets the minimum block size of an element. The direction of the block is determined by the writing-mode property. The property has no effect, if the content fits well within the block.

Syntax

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

Property Values

Value	Description
auto	No height limit is set with this value. Default.
length	It sets the min-block-size of the element using length units (e.g. px, em, rem etc.)
percentage	It sets the min-block-size of the element using percentage value relative to the size of the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Min Block Size Property

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

Min Block Size Property with Auto Value

To not set any specific limit on the block-size of an element, we use the auto value. The size of the block depends on the length of the content. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .container {
     background-color: lightgreen;
     min-block-size: auto;
  }   </style></head><body><h2>
  CSS min-block-size property   </h2><h4>
  min-block-size: auto   </h4><div class="container"><p>
     TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Min Block Size Property with Length Values



To set the minimum size of the block of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the block. If the content is greater than the size of the block, the element will grow to accomodate the content. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .container {
     background-color: lightgreen;
  }
  .size1 {
     min-block-size: 90px;
  }
  .size2 {
     min-block-size: 4.5em;
  }   </style></head><body><h2>
  CSS min-block-size property   </h2><h4>
  min-block-size: 90px   </h4><div class="container size1"><p>
     TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-block-size: 4.5em   </h4><div class="container size2"><p>
     TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Min Block Size Property with Percentage Values



To set the minimum size of the block of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the block. If the content is greater than the size of the block, the element will grow to accomodate the content. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 100px;
  }
  .container {
     background-color: lightgreen;
  }
  .size1 {
     min-block-size: 58%;
  }
  .size2 {
     min-block-size: 75%;
  }   </style></head><body><h2>
  CSS min-block-size property   </h2><h4>
  min-block-size: 58% (of the size 
  of the containing element)   </h4><div class="outer-container"><div class="container size1"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-block-size: 75% (of the size 
  of the containing element)   </h4><div class="outer-container"><div class="container size2"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Min Block Size Property with Writing Mode



The min-block-size property can be used in combination with the writing-mode property which determines the block direction. In horizontal-mode, the block-size grows from top to bottom. In vertical-mode, the block-size grows from left to right. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 150px;
  }
  .container {
     background-color: lightgreen;
     min-block-size: 40%;
  }
  .horizontal {
     writing-mode: horizontal-lr;
  }
  .vertical {
     writing-mode: vertical-rl;
  }   </style></head><body><h2>
  CSS min-block-size property   </h2><h4>
  min-block-size: 40% (of the size of the 
  containing element); writing-mode: horizontal-lr;   </h4><div class="outer-container"><div class="container horizontal"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-block-size: 40% (of the size of the 
  containing element); writing-mode: vertical-rl;   </h4><div class="outer-container"><div class="container vertical"><p>
        TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply Cancel reply

More posts