The min-block-size
CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the min-width
or the min-height
property, depending on the value of writing-mode
.
If the writing mode is vertically oriented, the value of min-block-size
relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is min-inline-size
, which defines the other dimension of the element.
Syntax
min-block-size: 100px;
min-block-size: 5em;
min-block-size: 10%;
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content(20em);
min-block-size: inherit;
min-block-size: initial;
min-block-size: revert;
min-block-size: revert-layer;
min-block-size: unset;
Values
The min-block-size
property takes the same values as the min-width
and min-height
properties.
min-block-size =
<'min-width'>
Setting minimum block size for vertical text
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
min-block-size: 200px;
}
Result
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
min-block-size |
57 |
79 |
41 |
No |
44 |
12.1 |
57 |
57 |
41 |
43 |
12.2 |
7.0 |
fit-content |
57 |
79 |
94 |
No |
44 |
12.1 |
57 |
57 |
94 |
43 |
12.2 |
7.0 |
fit-content_function |
No |
No |
91 |
No |
No |
No |
No |
No |
No |
No |
No |
No |
max-content |
57 |
79 |
6641 |
No |
44 |
12.1 |
57 |
57 |
6641 |
43 |
12.2 |
7.0 |
min-content |
57 |
79 |
6641 |
No |
44 |
12.1 |
57 |
57 |
6641 |
43 |
12.2 |
7.0 |