padding-block
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-block は CSS の一括指定プロパティで、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。
試してみましょう
padding-block: 10px 20px; writing-mode: horizontal-tb; padding-block: 20px 40px; writing-mode: vertical-rl; padding-block: 5% 10%; writing-mode: horizontal-tb; padding-block: 2em 4em; writing-mode: vertical-lr; <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 プロパティの一括指定です。
構文
css
/* <length> 値 */ padding-block: 10px 20px; /* 絶対的な長さ */ padding-block: 1em 2em; /* テキストの大きさに対する相対値 */ padding-block: 10px; /* 先頭と末尾の両方を設定 */ /* <percentage> 値 */ padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */ /* グローバル値 */ padding-block: inherit; padding-block: initial; padding-block: revert; padding-block: revert-layer; padding-block: unset; padding-block プロパティでは、1 つまたは 2 つの値を指定できます。1 つの値が指定された場合は、 padding-block-start と padding-block-end の両方の値として使用されます。2 つの値が指定された場合、1 つ目の値が padding-block-start に、2 つ目の値が padding-block-end に使用されます。
値
padding-block プロパティは、 padding-left プロパティと同じ値を取ります。
解説
padding-block で指定されたパディング値は、 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-block =
<'padding-top'>{1,2}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
例
縦書きテキストにおけるブロック方向のパディングの設定
HTML
html
<div> <p class="exampleText">テキストの例</p> </div> CSS
css
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } 結果
仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-padding-block |
ブラウザーの互換性
関連情報
- CSS 論理的プロパティと値
- 対応する物理的プロパティ:
padding-top,padding-right,padding-bottom,padding-left writing-mode,direction,text-orientation