CSS block-size 屬性

定義和用法

block-size 屬性指定元素在塊方向上的大小。

注意：相關的 CSS 屬性 writing-mode 定義了塊方向，這會影響 block-size 屬性的結果。對于英文頁面，塊方向是向下，而行內方向是從左到右。

CSS 的 block-size 和 inline-size 屬性與 CSS 的 width 和 height 屬性非常相似，但 block-size 和 inline-size 屬性依賴于塊方向和行內方向。

實例

例子 1

設置 <div> 元素在塊方向上的大小：

div {
  block-size: 200px;
}

親自試一試

例子 2

當 <div> 元素的 writing-mode 屬性值設置為 vertical-rl 時，塊方向從向下變為橫向，這會改變 block-size 屬性的作用方向：

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

親自試一試

CSS 語法

inset-block: auto|length|initial|inherit;

屬性值

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

相關頁面

CSS 教程：CSS 高度和寬度

CSS 教程：CSS 框模型

CSS 參考：height 屬性

CSS 參考：width 屬性

CSS 參考：writing-mode 屬性