CSS inset-block-end 属性

定義と使用法

inset-block-end 属性を指定して、要素のブロック方向の末端と親要素との距離を設定する必要があります。

注意：この属性が効果を発揮するには、 position 属性

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

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

例

例 1

既に配置された <div> elementがブロック方向の末端と親要素との距離を設定する：

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

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

例 2

when <div> element's writing-mode 属性値が vertical-rl に設定されている場合、ブロック方向は右から左です。結果として、要素の端は下から左側に移動します：

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

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

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

教程：CSS 定位

参考：CSS position 属性

参考：CSS writing-mode 属性