CSS min-block-size property
- Previous Page @media
- Next Page min-inline-size
Definition and usage
min-block-size
The attribute specifies the minimum size of the element in the block direction.
property value will be applied. min-block-size
If the size of the content in the block direction is less than the minimum size, then
property value. min-block-size
If the size of the content in the block direction is greater than the minimum size, then
The property value does not take effect.Note: Sets the block direction of the <div> element to vertical-rl:
related CSS properties min-block-size
Defining the block direction affects
properties result. For English pages, the block direction is downward, and the inline direction is from left to right. min-block-size
CSS properties are similar to CSS properties
min-height and
min-width min-block-size
Very similar, but
The property depends on the block direction.
Instance
Example 1
div { min-block-size: 200px; }
Sets the minimum size of the <div> element in the block direction to 200 pixels:
Example 2: Writing Mode Sets the block direction of the <div> element to vertical-rl:
writing-mode min-block-size
How the property works: when the property value is set to vertical-rl, the block direction changes from downward to lateral, which affects
div { min-block-size: 200px; writing-mode: vertical-rl; }
Example 3: min-block-size and block-size
Observe a <div> element (block-size
set to 100px) and another <div> element (min-block-size
Different reactions when the content size changes (set to 100px):
#div1 { min-block-size: 100px; } #div2 { block-size: 100px; }
CSS Syntax
min-block-size: auto|length|initial|inherit;
Property Value
Value | Description |
---|---|
auto | Default. The default min-block-size value of the element. |
length | Specifies min-block-size, in units such as px, pt, cm, etc. See:CSS Units. |
% | Specifies the percentage of the size of the corresponding axis relative to the parent element for min-block-size. |
initial | Sets this property to its default value. See initial. |
inherit | Inherits this property from its parent element. See inherit. |
Technical Details
Default Value: | auto |
---|---|
Inheritance: | No |
Animation Creation: | Supported. See:Animation-related properties. |
Version: | CSS3 |
JavaScript Syntax: | object.style.minBlockSize="10px" |
Browser Support
The numbers in the table represent the browser version that first fully supports this property.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
57.0 | 79.0 | 41.0 | 12.1 | 44.0 |
Related Pages
Reference:CSS block-size Attribute
Reference:CSS max-block-size property
Reference:CSS min-height property
Reference:CSS min-width property
Reference:CSS writing-mode attribute
- Previous Page @media
- Next Page min-inline-size