CSS line-height いまさら聞いてすいません
|CSSは専門外なので曖昧な事が多いですが少しづつ学びます!
という趣旨のシリーズです。
line-height
よく分からずに使っていなかったline-heightですが、放置も気持ちが悪いので調べてみました。
line-heightとは、行の高さ指定するプロパティです。
サンプルを作成して確認してみましょう。
実験してみる
分かりやすいように背景色をつけます。
<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <style> h2{ background-color:#79b4ef; font-size:26px; text-align:center; width:300px; } .bg{ background-color:#ffb4ef; } h2.one{ } </style> </head> <body> <h2 class="one"><span class="bg">行の高さを調べる one</span></h2> </body> </html>
こんな感じです。
ピンクの背景部分が26pxですが、青背景は26px以上あります。
ではline-hightを指定しましょう。
分かりやすいように縦に並べてみます。
<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <style> h2{ background-color:#79b4ef; font-size:26px; text-align:center; width:300px; } .bg{ background-color:#ffb4ef; } h2.one{ } h2.two{ line-height:1; } </style> </head> <body> <h2 class="one"><span class="bg">行の高さを調べる one</span></h2> <h2 class="two"><span class="bg">行の高さを調べる two</span></h2> </body> </html>
こんな感じです。
下のh2がline-heightをしていしたサンプルです。
ここでは1(100%、行の高さと同じ)に指定します。
行の高さを相対的に指定するプロパティのようです。
今まで曖昧だった箇所について、paddingやmarginで何となく微調整するのではなく、まずline-heightで調整してロジカルに設計してみたいと思います!