paddingとline-heightとheightの考察

要素の高さ

始めにHTMLのbody部分を下記のように記述し

<body>
<h1>ｈ１タグ Google 24px</h1>
<h2>ｈ２タグ Google 20px</h2>
<p>ｐタグ Google 16px</p>
</body>

フォントサイズを下記の値に固定して考える

＊ {
  margin: 0;
  padding: 0;
}/* ユニバーサルセレクタのリセットの*が表示バグで記述できないのでここでは大文字になっています */
h1 {
  font-size: 24px;
}
h2 {
  font-size: 20px;
}
p {
  font-size: 16px;
}

まず始めに各要素のバックグラウンドカラーをそれぞれ変更して高さを確認すると、
「グ」の点の上の部分から「g」や「p」の下部分までがフォントサイズなのが確認出来る
つまり、日本語のみだと下部分に余白が多くなり逆に英文だと上に余白が出来る

さらに中心を確認すると、だいたい「G」の横のラインになる

これらを踏まえて各要素にpadding、line-height、heightを追記して
バックグラウンドの変化について考える。

paddingについて

先ほどのCSSの記述の下に下記の文を追記して確認する

h1, h2, p {
  padding: 30px;
}

すると下のようにバックグラウンドの高さはそれぞれ84px,80px,76pxに広がるのがわかる

この時何を基準にしてバックグラウンドが広がっているか
余白部分をルーラで計って確認すると

「グ」の点の上までが30px、「g」や「p」の下までが30px広がっている

つまりpaddingで高さを決めると要素の大きさはpadding+font-sizeになる

line-heightについて

次にCSSの記述をpaddingからline-heightに変更して確認する

h1, h2, p {
  line-height: 30px;
}

表示を確認するとバックグラウンドの高さは下のように全て30pxになる

この時最初に確認しておいたフォントサイズの中心の「G」の横のラインから上下に高さを測ると
上下に高さを測ると下のようにどちらも15pxになる

つまりline-heightで高さを決めると要素の大きさはline-heightの値になり、中心から上下に値の半分が割り当てられる

heightについて

先ほどと同様にCSSの記述を下記のように変更する

h1, h2, p {
  height: 30px;
}

表示を確認するとバックグラウンドの高さは先ほどと同様全て30pxになる

line-heightの時と同じように中心から上下の高さを測ると
ｈ１の場合下のように上に12px、下に18pxになった

つまりheightで高さを決めると要素の大きさはフォントサイズの上を基準に下方向に伸びる

応用 font-sizeを下回る高さの場合

各スタイルを適応した時、表題のようになった場合のブラウザの挙動を確認する
まずpaddingだが、さきほど考察したとおり高さはpadding+font-sizeかつpaddingにマイナスの値を設定出来ないので下回ることはないので飛ばしline-heightから検証する
CSSを下記のように記述し確認する