最近便利なCSSおれおれAdvent Calendar 2023 – 19 日目

ブロック要素を中央に寄せるときって margin を auto しますよね。margin: 0 auto だと上下に 0 を指定するのがなんか嫌だなという感じが自分はあるので、margin-left と margin-right を併用して使っていました。欠点は書く量がちょっと多いことです。まあエディターでコピペすれば済むんだけど。

margin-inline を使うとまとめて指定できます。

例

.block {
  margin-inline: auto;
  width: 100px;
}

関連プロパティ

想像つくかもですが、左右の “inline” に対応して上下の margin-block というのもあります。動作も想像通り。

また margin を margin-top 等で上下左右へ分解できるのと同様、inline と block も margin-inline-start と margin-inline-end みたいに分解できます。

さらに margin と対になってる感じのある padding も同様に padding-inline と padding-block があります。加えて border も同様です。

まとめるとこんな感じ。（網羅ではなく抜粋）

  • margin-inline
  • margin-inline-start
  • margin-inline-end
  • margin-block
  • padding-inline
  • border-inline

inline/block と start/end

字の並びに相対的な表現なのでこれも想像つきそうですが、文が縦書きや右から左へ書くモードの場合はそれに合わせた方向になります。

というわけで縦書きの例です。”block” で “end” なのは左側ですね。

h1 {
  border-block-end: 4px solid tomato;
  writing-mode: vertical-rl;
}

おしまい

左右中央寄せで普通に使ってます。地味に助かる。いやほんと少しだけなんだけど。

参考