このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
padding-inline
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
padding-inline はCSS の一括指定プロパティで、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに対応づけられます。
試してみましょう
padding-inline: 5% 10%;writing-mode: horizontal-tb;padding-inline: 15px 40px;writing-mode: vertical-rl;padding-inline: 5% 20%;writing-mode: horizontal-tb;direction: rtl;<section> <div> <div> Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. </div> </div></section>#example-element { border: 10px solid #ffc129; overflow: hidden; text-align: left;}.box { border: dashed 1px; unicode-bidi: bidi-override;}構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* <length> 値 */padding-inline: 10px 20px; /* 絶対的な長さ */padding-inline: 1em 2em; /* テキストの大きさに対する相対値 */padding-inline: 10px; /* 先頭と末尾の両方を設定 *//* <percentage> 値 */padding-inline: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 *//* グローバル値 */padding-inline: inherit;padding-inline: initial;padding-inline: revert;padding-inline: revert-layer;padding-inline: unset;padding-inline プロパティでは、1 つまたは 2 つの値を指定できます。1 つの値が指定された場合は、padding-inline-start とpadding-inline-end の両方の値として使用されます。2 つの値が指定された場合、1 つ目の値がpadding-inline-start に、2 つ目の値がpadding-inline-end に使用されます。
値
<length>パディングの寸法を固定値で指定します。負の値は指定できません。
<percentage>パディングの寸法を包含ブロックのインラインサイズ（
writing-modeで横書き言語と定義されている場合はwidth）に対するパーセント値で示したものです。負の数であってはいけません。
解説
padding-inline で指定されたパディング値は、padding-top とpadding-bottom、またはpadding-right とpadding-left プロパティと同等になる可能性があります。これはwriting-mode,direction,text-orientation に設定された値によって決まります。
公式定義
| 初期値 | 一括指定の次の各プロパティとして |
|---|---|
| 適用対象 | table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column を除くすべての要素 |
| 継承 | なし |
| パーセント値 | 包含ブロックの論理的な幅 |
| 計算値 | 一括指定の次の各プロパティとして |
| アニメーションの種類 | length |
形式文法
padding-inline =
<'padding-top'>{1,2}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
例
縦書きテキストにおけるインライン方向のパディングの設定
HTML
<div> <p>テキストの例</p></div>CSS
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800;}結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-padding-inline |