max block size Property

Written by

in

CSS max-block-size property sets the maximum 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

max-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 max-block-size of the element using length units (e.g. px, em, rem etc.)
percentage	It sets the max-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 Max Block Size Property

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

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


Max Block Size Property with Length Values



To set the 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, it will overflow. This is shown in the following example.



Example



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


Max Block Size Property with Percentage Values



To set the 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, it will overflow. This is shown in the following example.



Example



<!DOCTYPE html><html><head><style>
  .outer-container {
     height: 100px;
  }
  .container {
     background-color: lightgreen;
  }
  .size1 {
     max-block-size: 55%;
  }
  .size2 {
     max-block-size: 75%;
  }   </style></head><body><h2>
  CSS max-block-size property   </h2><h4>
  max-block-size: 55% (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 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        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;
  max-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 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        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>


Max Block Size Property with Writing Mode



The max-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;
     max-block-size: 55%;
  }
  .horizontal {
     writing-mode: horizontal-lr;
  }
  .vertical {
     writing-mode: vertical-rl;
  }   </style></head><body><h2>
  CSS max-block-size property   </h2><h4>
  max-block-size: 55% (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 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        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;
  max-block-size: 55% (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 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        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