CSSインラインサイズ属性

定義と使用方法

inline-size 属性は要素の行内方向上のサイズを指定します。

注意：関連する CSS 属性 writing-mode 行内方向を定義し、以下に影響します。 inline-size 属性の結果です。英語ページでは、行内方向は左から右、ブロック方向は下に向かっています。

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

<div> 要素の行内方向上のサイズを設定する：

div {
  inline-size: 200px;
}

が <div> 要素の場合、 writing-mode 属性値が設定されている場合、 vertical-rl の場合、行内方向は水平から垂直下方向に変わります。これは以下に影響します。 inline-size 属性の動作方法：

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

inline-size: auto|length|initial|inherit;

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

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

Chrome	Edge	Firefox	Safari	Opera
57.0	79.0	41.0	12.1	44.0