CSSインセットブロック属性

定義と用法

inset-block 属性设置元素在块方向上与父元素之间的距离。

注意：この属性が有効になるためには、指定する必要があります position 属性。

inset-block 属性は以下の属性の短縮形式です：

inset-block 属性の値は以下の方法で設定できます：

inset-block属性に値が2つある場合：

inset-block: 10px 50px;
  • 始点距離は10pxです
  • 終点距離は50pxです

inset-block属性に値が1つある場合：

inset-block: 10px;
  • 始点と終点の距離はすべて10pxです

CSSのinset-blockと inset-inline 属性はCSSの top、bottom、left そして right 属性は非常に似ていますが、inset-blockと inset-inline 属性はブロック方向と行内方向に依存します。

注意：関連するCSS属性 writing-mode ブロック方向を定義します。これにより、ブロックの始点と終点、および inset-block 属性の結果。英語のページでは、ブロック方向は下向き、行内方向は左から右です。

結果

例

例1で、配置された<div>要素がブロック方向上で親要素との距離を設定します：

div {
  inset-block: 10px 50px;
}

自分で試してみてください

例2

when <div> element's writing-mode 属性値がvertical-rlに設定されている場合、要素の始点は上から右側に移動し、要素の終点は下から左側に移動します：

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

自分で試してみてください

CSS 语法

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

属性値

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

技術的詳細

デフォルト値： auto
継承性： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 语法： object.style.insetBlock="100px 50px"

ブラウザのサポート

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

クロム エッジ ファイアフォックス サファリ オペラ
87.0 87.0 63.0 14.1 73.0

相关页面

教程：CSS 定位

参考：CSS position 属性

参考：CSSインセットブロックエンド属性

参考：CSSインセットブロックスタート属性

参考：CSS writing-mode 属性