Webコンサルティング

デザインよりもテキストの下に余白が多く取られている。
検証ツールで見ると余白がテキストとして認識されている。
コーディングをしていればそんな現象に遭遇したことが誰しもあるはずです。

ほとんどの場合余白の原因はline-heightによるものです。

下の画像はborderの中のpadidingを13pxで統一したものです。
テキストが上によって見えます。

下の画像がpadding:13px 13px 9px;で指定したものです。
均等に余白がとられています。

テキストが1行しか入らない場合はline-height:1;で指定を行えば余白が均等になりますが、
テキスト量が増えた場合を考えると行間がつめつめになってしまいます。

また、ネットの利用がスマホ主流になっている昨今
PCでは1行でおさまっていたテキストもSPにしたら改行されるということが少なくはありません。

それを考慮するときちんとline-heightを指定し
paddingやmarginの数値を計算して設定していくことが大切です。