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 id="default-example"> <div class="transition-all" id="example-element"> <div class="box"> 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 class="exampleText">テキストの例</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 Level 1 # propdef-padding-inline |
ブラウザーの互換性
関連情報
- CSS 論理的プロパティと値
- 対応する物理的プロパティ:
padding-top,padding-right,padding-bottom,padding-left writing-mode,direction,text-orientation