いつのまにか使えるようになっていた便利CSSプロパティ margin-inline と margin-block 。
margin の値を「上下」と「左右」でまとめて指定できるというスグレモノです。
都度雰囲気で使っては表示確認でうまくいったり逆だったりしていたのですが、そろそろなんとかしたいのでまとめます。
ブロックレベル要素とインラインレベル要素
古のXHTML時代、 div や p のような要素を「ブロックレベル要素」、 a や span のような要素を「インラインレベル要素」と分類していました。
Figmaでいえば、 Fill Container と Hug Content のように、デフォルトで幅 100% に広がって縦に重なるのがブロックレベル、内容するものに応じて可変して、右（言語による）に回り込むのがインラインレベルです。
まんまこれやないか。
対応表
ということで、各プロパティの挙動は下記です。
| 旧来のプロパティ | 論理プロパティ |
|---|---|
margin-top |
margin-block-start |
margin-bottom |
margin-block-end |
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
margin-top + margin-bottom
|
margin-block |
margin-left + margin-right
|
margin-inline |
padding-top |
padding-block-start |
padding-bottom |
padding-block-end |
padding-left |
padding-inline-start |
padding-right |
padding-inline-end |
padding-top + padding-bottom
|
padding-block |
padding-left + padding-right
|
padding-inline |
上下にまとめて余白をつけたいときは、
/* Before */
.element {
margin-top: 16px;
margin-bottom: 16px;
}
/* After */
.element {
margin-block: 16px;
}
左右にまとめて余白をつけたいときは、
/* Before */
.container {
padding-left: 24px;
padding-right: 24px;
}
/* After */
.container {
padding-inline: 24px;
}
論理プロパティとは
top bottom left right は画面上の物理的な向きです。
一方、block inline は テキストの流れ方向に基づいた論理的（相対的）な向き です。
日本語の縦書きやアラビア語のような右から左に書く言語では、block と inline の向きが変わるため、デバイスによってStyleを変えるレスポンシブデザインの、言語仕様版（？）みたいなことも可能です。
/* writing-mode で縦書きにすると block と inline が入れ替わる */
.vertical-text {
writing-mode: vertical-rl;
}
どう考えてもデザインの難易度が縛上がりするので、その場合は場合「左右まとめて便利」くらいの用途でも十分だと思います。
ブラウザ対応状況
主要ブラウザはすべて対応済みです。やったね！
おわり。