CSS padding-inline-start 属性

定義と使用法

の padding-inline-start 属性は、行内方向の開始位置から境界線までのスペースを示しています。

CSS 非常に似ていますが、 に関連するCSS属性 padding-inline 属性はCSS属性 padding-toppadding-bottom、padding-bottompadding-left に関連するCSS属性 、 padding-right 非常に似ていますが、 に関連するCSS属性 padding-inline padding-block

属性は行内方向とブロック方向に依存しています。注意： writing-mode に関連するCSS属性 direction 行内方向を定義します。これは、要素の行内方向上の開始および終了位置、および padding-inline-start 属性の結果。英語ページの場合、ブロック方向は下、行内方向は左から右です。

例

例1

行内方向の開始位置にインラインパディングを設定します：

div {
  padding-inline-start: 50px;
}

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

例2

以下の<div>要素の writing-mode 属性値がvertical-rlに設定された場合、行内方向は下になります。結果として、要素の開始位置は左から上に移動します：

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

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

例3

以下の<div>要素の direction 属性値がrtlに設定された場合、行内方向は右から左になります。結果として、要素の開始位置は左から右に移動します：

div {
  direction: rtl;
  padding-inline-start: 100px;
}

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

CSS 文法

padding-inline-start: auto|value|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

相关页面

参考：CSS direction 属性

参考：CSS padding-inline 属性

参考：CSS padding-inline-end 属性

参考：CSS padding-bottom 属性

参考：CSS padding-left 属性

参考：CSS padding-right 属性

参考：CSS padding-top 属性

参考：CSS writing-mode 属性