CSS ブロックサイズ属性

定義と使用方法

block-size 属性は要素のブロック方向上のサイズを指定します。

注意：関連する CSS 属性に影響を与えます。 writing-mode ブロック方向を定義し、それが block-size 属性の結果です。英語ページでは、ブロック方向は下向き、インライン方向は左から右です。

CSS の block-size および inline-size 属性は CSS の width および height 属性は非常に似ていますが、 block-size および inline-size 属性はブロック方向とインライン方向に依存しています。

<div> 要素のブロック方向上のサイズを設定します：

div {
  block-size: 200px;
}

当 <div> 要素の writing-mode 属性値が vertical-rl に設定されている場合、ブロック方向が縦から横に変わります。これにより、block-size 属性の作用方向も変わります：

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

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

値	説明
auto	デフォルト。要素のデフォルトの block-size 値。
length	px、pt、cm などの単位で block-size を指定します。参照してください：CSS 単位。
%	親要素の対応する軸上のサイズに対するパーセンテージで block-size を指定します。
initial	この属性をデフォルト値に設定します。参照してください initial。
inherit	この属性は、親要素から継承されます。参照してください inherit。

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
57.0	79.0	41.0	12.1	44.0