【CSS 論理プロパティ】marginとpaddingの便利な設定

論理プロパティとは

論理プロパティとはtopやrightのように物理的に方向を指定するのではなく、要素の状態に応じて論理的に方向を指定することができるプロパティのことです。

blockとinline

論理プロパティでどの方向に対して値を指定するかを表す用語で、テキストの方向に依存します。

block

テキストの方向に対して垂直の方向を指します。
横方向にテキストが書かれている要素に対しては上下の方向になります。

inline

テキストの方向に対して水平の方向を指します。
横方向にテキストが書かれている要素に対しては左右の方向になります。

marginとpaddingの例

テキストの方向が横方向であることを前提とします。

block

一般的な指定

.block {
  padding-left: 8px;
  padding-right: 8px;
}

論理プロパティ

.block {
  padding-inline: 8px;
}

inline

一般的な指定

.inline {
  margin-left: 8px;
  margin-right: 8px;
}

論理プロパティ

.inline {
  margin-inline: 8px;
}

ショートハンドによる不要な上書きの回避

ショートハンドは便利ですが不用な上書きをしていることはありませんか？
「0」のところは上書きする必要がないからtopやbottomで指定を分けるべきだけどめんどくさい、、
そんなときに便利です！
一般的な指定

.class {
  margin: 8px 0;
}

論理プロパティ

.class {
  margin-block: 8px;
}

中央寄せでよく使うmarginのauto指定の場合

一般的な指定

.class {
  margin: 0 auto;
}

論理プロパティ

.class {
  margin-inline: auto;
}

おわりに

今回ご紹介したものは論理プロパティのほんの一部ですが、これだけでも実用的で便利ですよね！
他にもheightやwidthの論理プロパティがあったり、*-inline-startや*-inline-endを使って左右が反転するデザインの実装で逆向き用のCSSを減らすことができるのでますます出番が増えそうです。