padding-block

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

/* <length> 値 */
padding-block: 10px 20px;  /* 絶対的な長さ */
padding-block: 1em 2em;   /* テキストの大きさに対する相対値 */
padding-block: 5% 2%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
padding-block: 10px; /* 先頭と末尾の両方を設定 */

/* キーワード値 */
padding-block: auto;

/* グローバル値 */
padding-block: inherit;
padding-block: initial;
padding-block: unset;

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

値は padding-block-startpadding-block-end で個別に設定することができます。インライン方向のプロパティは padding-inline で、 padding-inline-startpadding-inline-end を設定します。

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

構文

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

形式文法

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

凡例

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

関連情報