CSS line-height いまさら聞いてすいません

FROGEGG | 2014/04/19 | CSS, Design | コメントはまだありません

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%、行の高さと同じ)に指定します。