line-height: 1;にも関わらず上下の余白が出る問題と対策

CSSのline-height: 1;を設定しても、一部の要素上下に余白が発生する場合があります。これはline-heightプロパティが、文字の高さだけでなく行全体の高さを決定するためです。したがって、line-height: 1;は文字の高さと行全体の高さが一致することを示しますが、それでも文字自体の上下には小さな余白が存在するため、期待した通りのレイアウトにならない場合があります。

この問題に対する一つの解決策は、::beforeや::after疑似要素を利用してネガティブマージンを適用する方法です。

.your-selector::before, .your-selector::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: -0.1em;
  margin-bottom: -0.1em;
}

このコードは、対象の要素に上下のネガティブマージンを適用し、余白を削除します。ただし、ネガティブマージンを用いるとレイアウトに影響を及ぼすことがあるため、適用する際には注意が必要です。