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 September 2021.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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-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

ブラウザーの互換性

関連情報