CSS inset-block-start 属性

定義と使用法

inset-block-start 属性を指定する必要があります。

注意：この属性が効果を発揮するためには、 position 属性と同じです。

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

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

例

例1

既定の <div> 要素のブロック方向上の先頭端と親要素の間の距離を設定します：

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

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

例2

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

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

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

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

教程：CSS 定位

参考：CSS position 属性

参考：CSS writing-mode 属性