測った通りに行間を指定しているのに高さが合わない場合の対処法【CSS】

CSSでカンプで測った通りにline-heightを指定しているのになんかずれちゃう…ってことありませんか？
もしくはカンプで余白(margin)が指定されていて、そのとおりに数字を入れているのに上に変な余白が出る…など。

今回はそんなトラブルの原因や、対処法などを簡単に説明していければいいなと思います！

まずイメージを掴んでもらうために画像を見てもらいます。

赤,黄色い部分が余白で、このように余白の指定がされている場合があると思います。
こういったデザインデータはコーダーからは大変助かる反面そのまま数値をいれても余白が合わないことがあり、人によっては悩みのタネになっているケースも多いです。

このように余白20pxだ〜とおもって単純に20pxで余白をいれてるはずなのに文字が上でそろってくれません。

「別に何も指定してないのに余白がでてしまう！なんでや！」

緑色の部分が謎の余白です。

この余白はなんぞやってハナシ。

結論を先に言ってしまうと、ズレる分の数値は簡単に計算できますのでその分をネガティブマージン（marginをマイナスにとって余白をせばめること）やpositionなどで位置を調整してあげるといいです。

（line-height の実数値　-　フォントサイズ）÷　2　＝　詰めるべき数値
（line-heightに単位がない場合は「フォントサイズ × line-height」）

そもそもの原因はAiなどのカンプデータと、web上の「行間」「行送り」の設定による違いによって起こる問題なのでその分の数値を詰めればいいという結論になります。