line-height と padding の関係

記事やサイドバーの見出し、あるいはボタンなどに上下左右均等に余白を取りたいとき、例えば padding: 10px と指定しても妙に上下方向だけ伸びていることがあるが、これは余白を指定した要素に含まれる文字が親要素に指定された line-height の影響を受けているためだ。

body {
    line-height: 1.5;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding: 10px;
}

例えば、上記のようにfont-size: 16px のテキストを含むボタンが line-height: 1.5 を継承した場合、このテキストには {(16px * 1.5) - 16px} / 2 = 4pxの余白が上下に割り振られるため、表示されるボタンの余白は padding: 14px 10px のように見えてしまう。

すなわち、この要素に上下均等に余白を取るには上下方向の余白に左右方向より 4px 小さい値を指定しなくてはいけない。

body {
    line-height: 1.5;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding: 6px 10px;

…最も、日本語サイトでは body の line-height は 1.7 前後が多く、この例のように左右方向から引く値が単純明快な値になるケースは少ない。左右から何px 引いた値を指定するのが正解かはとても分かりにくいのである。そういう場合は em（相対値）が便利だ。

body {
    line-height: 1.7;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding: 0.65em 1em;
}

em（相対値）で上下左右均等な余白を指定する場合、上下方向の余白は左右方向から (line-height - 1) / 2（小数点以下の半分）を引いた値を指定する。

この指定の場合、テキスト上下の余白は {(16px * 1.7) -16} / 2 = 5.6px となり、ボタンの上下方向の余白は 16px * 0.65 = 10.4px、ボタンの左右方向の余白は 1em = 16px となり、padding: (10.4 + 5.6)px 16px で上下均等になる。

応用

body {
    line-height: 1.7;
}
button {
    background-color: #eee;
    color: #333;
    font-size: 16px;
    padding-top: calc(16px - (((1em * 1.7) - 1em ) / 2));
    padding-left: calc(16px * 1.618);
    padding-right: calc(16px * 1.618);
    padding-bottom: calc(16px - (((1em * 1.7) - 1em ) / 2));
}

CSS3 の calc() を使い、基準値から黄金比（1:1.618）な余白を指定してみた。基準値は 16px とした。