マージン、境界、パディングの論理的プロパティ
CSS 論理的プロパティと値モジュールでは、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義しています。
CSS 論理的プロパティと値のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺について 4 つの個別指定値と、一括指定値のすべてがあるためです。
マージン、境界、パティングの対応付け
この仕様では、それぞれの論理値の物理的な対応関係を詳細に示しています。下の表では、使用されている writing-mode が horizontal-tb — 左書きであると仮定して、これらに対応する値を与えています。インラインの方向は左から右への水平方向で、margin-inline-start は margin-left と同じになります。
horizontal-tb を使用して右書きである場合は、 margin-inline-start が margin-right と同じになり、縦書きの場合は margin-top を使うのと同じになります。
また、ボックスの両方のブロックまたは両方のインライン側の縁を同時に対象にできることから、いくつかの追加の略語があります。これらの略語は、物理的プロパティに同等のものはありません。
| プロパティ | 目的 |
|---|---|
border-block |
border-color, border-style, border-width をブロック次元の両方の境界に設定します。 |
border-block-color |
border-color をブロック次元の両方の境界に設定します。 |
border-block-style |
border-style をブロック次元の両方の境界に設定します。 |
border-block-width |
border-width をブロック次元の両方の境界に設定します。 |
border-inline |
border-color, -style, -width をインライン次元の両方の境界に設定します。 |
border-inline-color |
border-color をインライン次元の両方の境界に設定します。 |
border-inline-style |
border-style をインライン次元の両方の境界に設定します。 |
border-inline-width |
border-width をインライン次元の両方の境界に設定します。 |
margin-block |
ブロック次元のすべての margin を設定します。 |
margin-inline |
インライン次元のすべての margin を設定します。 |
padding-block |
ブロック次元のすべての padding を設定します。 |
padding-inline |
インライン次元のすべての padding を設定します。 |
マージンの例
対応付けられたされたマージンのプロパティである margin-inline-start, margin-inline-end, margin-block-start, margin-inline-end は、物理的に対応するプロパティの代わりに使用できます。
下の例では、2 つのボックスを作成し、それぞれの端に異なるサイズのマージンを加えています。マージンがよりわかりやすくなるように、境界付きの特別なコンテナーを追加しています。
一方のボックスは物理的なプロパティを使用しており、もう一方は論理的なプロパティを使用しています。 direction プロパティを rtl に変更して、ボックスが右から左の方向に表示されるようにしてみてください。 1 つ目のボックスのマージンは同じ場所に留まりますが、 2 つ目のボックスのインライン次元のマージンは切り替わります。
また、writing-mode を horizontal-tb から vertical-rl に変更してみてください。ここでも、最初のボックスではマージンが同じ場所に留まっていますが、 2 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。
<div class="container">
<div class="inner">
<div class="physical box">
margin-top: 5px<br />
margin-right: 0<br />
margin-bottom: 2em<br />
margin-left: 50px
</div>
</div>
<div class="inner">
<div class="logical box">
margin-block-start: 5px<br />
margin-inline-end: 0<br />
margin-block-end: 2em<br />
margin-inline-start: 50px
</div>
</div>
</div>
.box {
writing-mode: horizontal-tb;
direction: ltr;
}
.physical {
margin-top: 5px;
margin-right: 0;
margin-bottom: 2em;
margin-left: 50px;
}
.logical {
margin-block-start: 5px;
margin-inline-end: 0;
margin-block-end: 2em;
margin-inline-start: 50px;
}
マージンの一括指定
ボックスの両側（インライン次元の両側またはブロック次元の両側）を対象とすることができるようになったため、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 つ目のボックスではテキストの方向に合わせて切り替わっていることに注意してください。
<div class="container">
<div class="physical box">
padding-top: 5px<br />
padding-right: 0<br />
padding-bottom: 2em<br />
padding-left: 50px
</div>
<div class="logical box">
padding-block-start: 5px<br />
padding-inline-end: 0<br />
padding-block-end: 2em<br />
padding-inline-start: 50px
</div>
</div>
.box {
writing-mode: horizontal-tb;
direction: ltr;
}
.physical {
padding-top: 5px;
padding-right: 0;
padding-bottom: 2em;
padding-left: 50px;
}
.logical {
padding-block-start: 5px;
padding-inline-end: 0;
padding-block-end: 2em;
padding-inline-start: 50px;
}
パディングの一括指定
マージンと同様に、パディングにも 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 に変更したりしてみてください。
<div class="container">
<div class="physical box">物理的プロパティを使用した境界</div>
<div class="logical box">論理的プロパティを使用した境界</div>
</div>
.box {
writing-mode: horizontal-tb;
direction: ltr;
}
.physical {
border-top: 2px solid hotpink;
border-right-style: dotted;
border-right-color: goldenrod;
border-right-width: 5px;
border-bottom: 4px double black;
border-left: none;
}
.logical {
border-block-start: 2px solid hotpink;
border-inline-end-style: dotted;
border-inline-end-color: goldenrod;
border-inline-end-width: 5px;
border-block-end: 4px double black;
border-inline-start: none;
}
境界の一括指定
ブロックやインライン次元の幅、スタイル、色を設定する 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 プロパティ
この仕様では、かなり最近になって 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;
}
4 つの値の一括指定構文で論理的な値を示す
仕様書では、margin プロパティのような 4 つの値の一括指定を提案していますが、これをどのように表示するかの最終決定はまだなされておらず、この issue で議論されています。
margin、padding、border などの 4 つの値の一括指定を使用すると、現在は物理的なバージョンが使用されるので、文書の流れに従うことが重要な場合は、当面は個別指定のプロパティを使用してください。