[CSS]inlineとblockを知ればpadding・margin指定がちょっと楽になる!

最終更新: 2023/01/06/公開: 2023/01/06

inlineとblockとはざっくり言うと

技術的な正確性は欠きますが見た目には……

  • inline:横書きのときの横方向
  • block:横書きの時の縦方向

なのでwriting-modeで縦書きにしたときは90度変化します

padding-inline/padding-blockや
margin-inline/margin-blockで簡略な記述

InternetExplorerへの対応が必要だった少し前までは使えない指定でしたが現在は使えます。top・bottomの2行で指定していたものが1行ですみますのでソースの見通しが良くなります。おすすめ!

分割した指定例

.hoge {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.fuga {
  margin-left: auto;
  margin-right: auto;
}

一括の指定例

.hoge {
  margin-block: 3rem;
}
.fuga {
  margin-inline: auto;
}