テキストの上下余白を正しく計算する

例えば、テキストの上下に20pxずつの余白を設定したい場合、padding:20px 0;のように指定しただけでは、ぴったり20pxずつの余白にはならない。実際にはテキストの上下に行の高さによる余白もあるため、その影響を考慮する必要がある。

以下の例では、padding-topプロパティとpadding-bottomプロパティにcalc(20px – (1.5rem * 1.4 – 1.5rem) / 2)を指定することで、テキストの上下にぴったり20pxずつの余白を設定している。

h2 {
  font-size: 1.5rem;
  line-height: 1.4;
  padding: calc(20px - (1.5rem * 1.4 - 1.5rem) / 2) 10px;
}