必ず使用する重要なプロパティですが、初学者が苦手なプロパティにline-heightがあります。
主にテキストの行間の高さを指定するために使用されます。このプロパティを使って、行間を調整することで、テキストの可読性やデザインを向上させることができます。いくつかの単位があり、どれを使用していいかわからず、上下のmarginにまで影響してくるため理解しづらい部分がありますのでまとめてみました。単位ですが、下記のパターンがあります。
①単純な数値
数値で指定すると、その数値はフォントサイズに対する倍率として機能します。例えば、line-height: 1.5;はフォントサイズの1.5倍の行間になります。
p {
font-size: 16px;
line-height: 1.5; /* 16px * 1.5 = 24px の行間 */
}
②パーセンテージ（percentage）
数値と似ていますが、パーセンテージはフォントサイズに対する割合を示します。例えば、line-height: 150%;はフォントサイズの150%の行間になります。
p {
font-size: 16px;
line-height: 150%; /* 16px * 1.5 = 24px の行間 */
}
③長さの単位（px, em, rem など）
em : 親要素のフォントサイズに対して相対値
rem: ルート要素（<html>タグ）のフォントサイズに基づいた相対
p {
font-size: 16px;
line-height: 24px; /* 固定で24pxの行間 */
}
④normal キーワード
p {
font-size: 16px;
line-height: normal; /* ブラウザデフォルトの行間 */
}
それではどの単位を使えばいいのか？
基本的にはケースバイケースで具体的なデザイン要件や状況に応じて、他の単位も適切に選択するのですが、一般的には、数値（1.6が標準）が最もよく使われます。これは、レスポンシブデザインや異なるフォントサイズに対応する場合に柔軟だからです。
