【CSS】CSSでテキストの上下余白を正しく計算する方法

今回は正確に上下の余白をCSSで計算する方法をメモしておく。正確ではないCSSも記載しておくので、ぜひ比較してほしい。

See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.

また、以下のようにするとメンテナンス性が向上し、複数の場所から呼び出せるので便利

* {
  --calc-padding: calc(var(--vertical-padding) - var(--font-size) * var(--line-height) - var(--font-size) / 2) var(--horizontal-padding);
}

h2 {
  --font-size: 1.5rem;
  --line-height: 1.4;
  --horizontal-padding: 10px;
  --vertical-padding: 20px;
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: var(--calc-padding);
}