padding-block

padding-blockCSS一括指定プロパティで、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。

/* <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: unset;

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

padding-block プロパティは、 padding-left プロパティと同じ値を取ります。

解説

これらの値は、 padding-toppadding-bottom、または padding-rightpadding-left プロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。

公式定義

初期値0
適用対象すべての要素
継承なし
パーセンテージlogical-width of containing block
計算値as length
アニメーションの種類個別

形式文法

<'padding-left'>{1,2}

縦書きテキストにおけるブロック方向のパディングの設定

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}

結果

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
padding-block の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
padding-blockChrome 完全対応 69
無効
完全対応 69
無効
無効 From version 69: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 79
無効
完全対応 79
無効
無効 From version 79: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Firefox 完全対応 66IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 完全対応 69Chrome Android 完全対応 69
無効
完全対応 69
無効
無効 From version 69: this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 66Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報