閲覧ありがとうございます。
この記事ではコーディングの際、テキストや画像との高さが合わずずれてしまう時の解消方法の一つを挙げています。
- ヘッダーメニューのアイコンとテキストの高さのバランスが崩れる
- レスポンシブ時のテキストの高さが崩れてしまう
- ボタンを使いまわすときに高さを合わせる手間がかかる
こんな問題を解消できます。
目次
テキストの高さを合わせる（line-height）
テキストをアイコンの真ん中の高さに合わせようとするとき、padding-topやpadding-bottomで合わせることもできます。
ですがこれだと親要素やレスポンシブ時の設定に影響を受けた場合に崩れてしまい、改めて指定が必要になり手間がかかりました。
line-heightを使うことでテキストの高さが絶対値で指定できるので環境に影響されずに表示させることができるので、レスポンシブにも対応できます。
基本的にはfont-sizeと同じ値で問題なく表示されています。
記事は以上です。
コーディング時の参考になれば幸いです。
コメント