CSS padding-inline 属性

定義と使用方法

要素の padding-inline これは、行内方向に、境界から内容へのスペースを指します。以下の属性の省略形です：

• padding-inline-start
• padding-inline-end

padding-inline 属性の値は異なる方法で設定できます：

padding-inline属性が2つの値を持っている場合：

padding-inline: 10px 50px;

• 始端のインライン方向の内余白は10pxです
• 終端のインライン方向の内余白は50pxです

如果 padding-inline 属性有一个值：

padding-inline属性に値が1つある場合：

• padding-inline: 10px;

の先頭と終端のインラインパディングはすべて10pxです padding-inline に関連するCSS属性 非常に似ていますが、 CSS 属性はCSS属性padding-toppadding-bottompadding-top、 に関連するCSS属性 padding-left padding-right padding-inline に関連するCSS属性 非常に似ていますが、 padding-block

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

インスタンス

例1

インライン方向の両側にインラインパディングを設定します：

div {
  padding-inline: 50px;
}

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

例2

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

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

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

例3

<div>要素の direction 属性値がrtlに設定されている場合、インライン方向は右から左です。結果として、要素の先頭は左側から右側に、終端は右側から左側に移動します：

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

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

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

相关页面

参考：CSS direction 属性

参考：CSS padding-inline-end 属性

参考：CSS padding-inline-start 属性

参考：CSS padding-bottom 属性

参考：CSS padding-left 属性

参考：CSS padding-right 属性

参考：CSS padding-top 属性

参考：CSS writing-mode 属性