CSS基礎文法編 line-heightについて
早朝からたまたまやっております。
line-heightって奥深いなと思った。。。
よく使いそうなは、
line-height: 〇; (数字のみ)
理由は、こんな感じ(であってるとおもう)
htmlが下記であった場合
<main>
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
<section>
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
</main>
cssに
main {
font-size: 32px;
line-height: 2em;
}
section {
font-size: 16px;
}
とすると、
2emと指定しているので、fontosizeの2倍である64pxが行の高さとなり且つ、
継承されるので、sectionタグにも64pxが適用される。
なので見た目があまりよくないようです。
下のsectionのほうのこんちはの行間広すぎる。
今度はcssのline-heightを2にすると
main {
font-size: 32px;
line-height: 2;
}
section {
font-size: 16px;
}
sectionタグ内でも2倍の計算をしてくれるので
mainタグの行の高さは64pxで、sectionタグ内は32pxの行の高さとなるので
自然な感じになる。
狭まったのわかるかな?参考程度の画像です。
なんで、line-heightは数字のみ;ですね。
またやろう✋(オ〇ロスキー)