マージン、境界、パディングの論理的プロパティ

この仕様では、それぞれの論理値の物理的な対応関係を詳細に示しています。下の表では、使用されている writing-mode が horizontal-tb — 左書きであると仮定して、これらに対応する値を与えています。インラインの方向は左から右への水平方向で、margin-inline-start は margin-left と同じになります。

horizontal-tb を使用して右書きである場合は、 margin-inline-start が margin-right と同じになり、縦書きの場合は margin-top を使うのと同じになります。

また、ボックスの両方のブロックまたは両方のインライン側の縁を同時に対象にできることから、いくつかの追加の略語があります。これらの略語は、物理的プロパティに同等のものはありません。

対応付けられたされたマージンのプロパティである margin-inline-start, margin-inline-end, margin-block-start, margin-inline-end は、物理的に対応するプロパティの代わりに使用できます。

下の例では、2 つのボックスを作成し、それぞれの端に異なるサイズのマージンを加えています。マージンがよりわかりやすくなるように、境界付きの特別なコンテナーを追加しています。

一方のボックスは物理的なプロパティを使用しており、もう一方は論理的なプロパティを使用しています。direction プロパティを rtl に変更して、ボックスが右から左の方向に表示されるようにしてみてください。1 つ目のボックスのマージンは同じ場所に留まりますが、2 つ目のボックスのインライン方向のマージンは切り替わります。

また、writing-mode を horizontal-tb から vertical-rl に変更してみてください。ここでも、最初のボックスではマージンが同じ場所に留まっていますが、2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。

ボックスの両側 (インラインの両側またはブロックの両側) を対象とすることができるようになったため、margin-inline と margin-block という新しい一括指定が用意されており、2 つの値を受け入れます。1 つ目の値はその次元の先頭に適用され、2 つ目の値は末尾に適用されます。1 つの値しか使用しない場合は、両方に適用されます。

横書きの場合、この CSS はボックスの上部に 5px のマージンを、下部に 10px のマージンを適用します。

.box {
  margin-block: 5px 10px;
}

padding-inline-start, padding-inline-end, padding-block-start, padding-inline-end の対応付けられたパディングプロパティは、物理的な対応の代わりに使用することができます。

以下の例では、2 つのボックスがあり、一方は物理的なパディングプロパティを使用しており、もう一方は論理的なパディングプロパティを使用しています。 writing-mode が horizontal-tb の場合は、両方のボックスは同じように表示されるはずです。

direction プロパティを rtl に変更して、ボックスが右から左の方向に表示されるようにしてみてください。1 つ目のボックスのパディングは同じ場所に留まりますが、2 つ目のボックスのインライン方向のパディングは切り替わります。

また、writing-mode を horizontal-tb から vertical-rl に変更してみてください。ここでも、最初のボックスではパディングは同じ場所に留まっていますが、2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。

マージンと同様に、パディングにも 2 つの値の一括指定 — padding-inline と padding-block — があります。これにより、2 つのインライン方向と 2 つのブロック方向のパディングをそれぞれ設定することができます。

writing-mode が横書きである場合、この CSS はボックスの上部に 5px のパディングを、下部に 10px のパディングを適用します。

.box {
  padding-block: 5px 10px;
}

境界のプロパティは、論理的プロパティと値が非常に多くのプロパティを持っているように見える主な原因であり、ボックスのそれぞれの辺の境界線の色、幅、スタイルを表す個別指定と、それぞれの辺に 3 つを一度に設定する一括指定があります。マージンやパディングと同様に、それぞれの物理的なプロパティの対応付けされたバージョンがあります。

以下のデモでは、いくつかの個別指定と 3 つの一括指定の値を使用しています。他のデモと同様に、direction プロパティを rtl に変更してボックスを右から左の方向に表示させたり、writing-mode を horizontal-tb から vertical-rl に変更したりしてみてください。

ブロックやインライン方向の幅、スタイル、色を設定する 2 値の一括指定と、ブロックやインライン方向の 3 つの値をすべて設定する 2 値の一括指定があります。下のコードは、横書きの場合、ボックスの上下に 2px の緑の実線の境界線、左右に 4px の紫の点線の境界線が表示されます。

.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

この仕様では、かなり最近になって border-radius の個別指定にフロー相対値が追加されました。これらはまだどのブラウザーでも実装されていません。以下の例では、横長の writing-mode で、右上の境界の半径を 1em、右下を 0、左下を 20px、左上を 40px に設定しています。

.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}

仕様書では、margin プロパティのような 4 つの値の一括指定を提案していますが、これをどのように表示するかの最終決定はまだなされておらず、この Issue で議論されています。

margin、padding、border などの 4 つの値の一括指定を使用すると、現在は物理的なバージョンが使用されるので、文書の流れに従うことが重要な場合は、当面は個別指定のプロパティを使用してください。