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 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-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-top と padding-bottom、または padding-right と padding-left プロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。

公式定義

初期値	一括指定の次の各プロパティとして `padding-inline-start`: `0` `padding-inline-end`: `0`
適用対象	`table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素
継承	なし
パーセント値	包含ブロックの論理的な幅
計算値	一括指定の次の各プロパティとして `padding-inline-start`: `<length>` 通り `padding-inline-end`: `<length>` 通り
アニメーションの種類	length

形式文法

padding-inline = 
  <'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-inline: 20px 40px;
  background-color: #c8c800;
}

結果

仕様書

Specification
CSS Logical Properties and Values Level 1 # propdef-padding-inline