CSS min-block-size 属性

定义和用法

min-block-size 属性指定元素在块方向上的最小尺寸。

如果内容在块方向上的尺寸小于最小尺寸，则将应用 min-block-size 属性值。

如果内容在块方向上的尺寸大于最小尺寸，则 min-block-size 属性值不起作用。

注意：相关的 CSS 属性 writing-mode 定义了块方向，这会影响 min-block-size 属性的结果。对于英文页面，块方向是向下，而行内方向是从左到右。

CSS min-block-size 属性与 CSS 属性 min-height 和 min-width 非常相似，但 min-block-size 属性依赖于块方向。

实例

例子 1

将 <div> 元素在块方向上的最小尺寸设置为 200 像素：

div {
  min-block-size: 200px;
}

亲自试一试

例子 2：书写模式

将 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，块方向从向下变为侧向，这会影响 min-block-size 属性的工作方式：

div {
  min-block-size: 200px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3：min-block-size 与 block-size

观察一个 <div> 元素（block-size 为 100px）和另一个 <div> 元素（min-block-size 为 100px）在内容尺寸变化时的不同反应：

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS block-size 属性

参考：CSS max-block-size 属性

参考：CSS min-height 属性

参考：CSS min-width 属性

参考：CSS writing-mode 属性