CSS padding-inline-end 属性

定義と使用方法

要素の padding-inline-end は、行内方向の終了位置から要素の枠線までのスペースを示しています。

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

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

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

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

<div>要素の writing-mode 属性値がvertical-rlに設定されている場合、行内方向は下です。結果として、要素の終了位置は右側から下部に移動します：

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

<div>要素の direction 属性値がrtlに設定されている場合、行内方向は右から左です。結果として、要素の終了位置は右側から左側に移動します：

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

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

値	説明
auto	デフォルト値。要素のデフォルトのpadding-inline-end距離。
length	px、pt、cmなどの単位で指定された距離を指定します。負値は許可されません。参照してください：CSS 単位。
%	親要素に対する行内方向上のサイズのパーセンテージ距離を指定します。
initial	この属性をデフォルト値に設定します。参照してください： initial。
inherit	親要素からこの属性を継承します。参照してください： inherit。

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

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

Chrome	Edge	Firefox	Safari	Opera
87.0	87.0	41.0	12.1	73.0