【CSS】CSSでフォントサイズの違うテキストの高さを揃える【line-height】

コーディング
スポンサーリンク

左側の列と左側の列を、一つの集まりにしてflexでそれぞれ横並びにした状態です。
左側の文字が大きいためテキストに余白を作った時にそれぞれ違った高さが出てしまい、高さが揃いません。
フォントサイズが違う文字の高さを揃える

 

line-heightを揃えて解決

大きい方のテキストのline-heightは30pxなので、左側の小さいテキストも30pxに揃えます。

テキストのクラス { line-height: 30px; }

 

フォントサイズが違う文字の高さを揃える

line-heightを揃えることで簡単に高さを揃えることができました!

 

念のためテキストにバックグラウンドカラーをつけて確認してみます。

フォントサイズが違う文字の高さを揃える

OKですね!

コメント

タイトルとURLをコピーしました