CSS論理プロパティが便利

CSS論理プロパティとは言語や書字方向（左から右、右から左、縦書きなど）に依存せず、要素のレイアウトをより柔軟かつ国際的に制御するためのプロパティです。
通常のCSSプロパティでは、物理的な方向に基づいて値を指定しますが、論理プロパティを使うと、書字方向に影響されずにレイアウトを定義することができます。

物理プロパティと論理プロパティの違い

物理プロパティでは、方向を「上（top）」「下（bottom）」「左（left）」「右（right）」と物理的に指定しますが、これらは書字方向が変わると期待通りのレイアウトにならないことがあります。論理プロパティでは、これを「ブロック軸」や「インライン軸」といった論理的な概念に置き換えることで対応します。

特にmarginやpaddingだけでもかなり便利です。
一部の便利な論理プロパティを紹介します。

margin・padding

物理プロパティ

margin-top / マージン上
margin-bottom / マージン下
margin-right / マージン右
margin-left / マージン左

padding-top / パディング上
padding-bottom / パディング下
padding-right / パディング右
padding-left / パディング左

論理プロパティ

ブロック軸：テキストの行の流れに対して垂直方向の軸（通常は上下）。
インライン軸：テキストの行の流れに沿った水平方向の軸（通常は左右）。

margin-block-start
margin-block-end
margin-inline-start
margin-inline-end

padding-block-start
padding-block-end
padding-inline-start
padding-inline-end

marginやpaddingで論理プロパティを使用すると便利なのが、中央寄せでよく使うmarginのauto指定

物理プロパティだと

.class {
 margin: 0 auto;
}

または

.class {
 margin-right: auto;
 margin-left: auto:
}

物理プロパティだと

.class {
 margin-inline: auto;
}

物理プロパティのこれも

.class {
 margin: 10px 0;
}
.class {
 margin-top: 10px;
 margin-bottom: 10px;
}

論理プロパティなら

.class {
 margin-block: 10px;
}

paddingも同じように、inlineやblockで指定できます。

※margin-left: auto; margin-right: auto; と margin-inline: auto; は同じような見た目になる場合がありますが、決して同じではありません。
margin-inline は書字方向に応じて左右が自動で変わります。右から左に書く言語では、margin-inline は反転して適用されるため、異なる動作をすることがあります。

positionプロパティのショートハンド

従来の top、right、bottom、left プロパティを個別に指定する代わりにinsetで一括で指定できます。

.element {
  position: absolute;
  inset: 10px;
}

上記の例では、top: 10px; right: 10px; bottom: 10px; left: 10px; を一度に指定しています。

2つや3つ4つの値でも可能です。

.element {
  position: absolute;
  inset: 10px 20px;
}

top: 10px; bottom: 10px; right: 20px; left: 20px;

.element {
  position: absolute;
  inset: 10px 20px 30px;
}

top: 10px; right: 20px; left: 20px; bottom: 30px;

.element {
  position: absolute;
  inset: 10px 20px 30px 40px;
}

top: 10px; right: 20px; bottom: 30px; left: 40px

最後に

今回ご紹介した論理プロパティは一部ですが、marginやpadding、insetだけでも便利です。
国際化対応や、異なる言語での柔軟なデザインに役立つので今後は論理プロパティが主流になってくると思います。
また機会があれば論理プロパティの紹介をしたいと思います。