CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか

投稿日 2013/05/02 更新日 2020/09/01

表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。
自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。

参考

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification（日本語訳）
Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版. オライリージャパン, 2010

インライン要素とは何か

文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。
インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない（置換要素の代表例はimg要素）。

非置換要素とは何か

要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。

インライン非置換要素の特徴

widthとheightは適用されない。
背景はコンテンツエリアとpaddingに適用される。
上下marginは、事実上適用されない。
左右paddingは、要素の先頭と末尾のみに適用される。
上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行（実際は上の行）に重なってしまう。

line-heightは何を制御しているか

行高を指定するline-heightは単純に行間を制御しているのではなく、leadingという、コンテンツエリアの上下にある余白を制御している。leadingはline-heightとfont-sizeとの差であり、この差を等分してコンテンツエリアの上下に加えることによって行間が決まる（コンテンツエリア＋leadingをインラインボックスという）。

コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。
図解すると以下の通り。

つまり、line-heightが設定されたテキストが1行のみの時は、テキストは自ずとインラインボックスの天地中央に配置されることになる。

なぜa要素に「display: block;」を指定するのか

インライン非置換要素であるa要素に、widthとheightを適用させ、上記line-heightの設定により天地中央に揃えられ且つ背景色部分にもリンクが及ぶようにするため。

ボタンのHTML

<body>
        <div>
                <a href="#">BUTTON</a>
        </div>
</body>

ボタンのCSS

a {
        /* ブロックレベル要素化 */
        display: block;
        
        /* サイズ指定 */
        width: 200px;
        height: 50px;
        
        /* 縦横中央揃え */
        text-align: center;
        line-height: 50px;
        
        /* 色指定 */
        color: #FFFFFF; 
        background-color: #0099B5;
        
        /* その他 */
        font-size: 12px;
        text-decoration: none;
}
a:hover {
        color: #FFFFFF;
        background-color: #3E4051;
}

BUTTON

※水色の部分にもリンクが及んでいる。

※「display: block;」を指定せずともpaddingを上下左右に適用してボタンの作成は可能。しかし、上下paddingは行の高さに影響せず、また上下marginも事実上適用されないため、ボタン自身にcssを適用してボタンの位置を調整することが出来ない（他の要素に依存）。

わざわざa要素に「display: block;」を指定せずとも、a要素を囲っているdiv要素にwidthとheight、background-colorを適用してはいいのでは？

a要素はインライン非置換要素であるため、a要素の適用範囲はコンテンツエリアのみであり、div要素からa要素のコンテンツエリアを引いた範囲にはリンクが及ばないため、ボタンではなく只のテキストリンクになってしまう。

ボタンのHTML

<body>
        <div>
                <a href="#">BUTTON</a>
        </div>
</body>

ボタンのCSS

div {
        /* サイズ指定 */
        width: 200px;
        height: 50px;
        
        /* 縦横中央揃え */
        text-align: center;
        line-height: 50px;
        
        /* 色指定 */
        color: #FFFFFF;
        background-color: #0099B5;
        
        /* その他 */
        font-size: 12px;
}
a {
        color: #FFFFFF; 
        text-decoration: none;
}
a:hover {
        color: #FFFFFF;
        background-color: #3E4051;
}

BUTTON

※リンクはテキスト部分のみで、水色の部分にまで及んでいない。