CSSで文字サイズ指定した場合のバックグラウンドサイズ

Question

HTMLの文字サイズをCSSで指定した際、デフォルトのその要素の背景のサイズはいくつになるのでしょうか？

例えば、CSSで

p {
  font-size: 36px;
  background-color: rgb(255,0,0);
}

のようにコーディングすると背景が赤でフォント36pxの文字が描画されます。その背景のサイズはいくつになっているのでしょうか？また他のフォントサイズの場合はどうなるのでしょうか？一定の規則とかあるんですか？

Answer 1

p要素はブロックレベル要素のなので、幅は親要素の幅から左右のpaddingを引いたものになります。

高さは 行の高さ × 行数 + 上下padding になります。

行の高さはlineheightで決まります。既定では1.5かな？ブラウザで異なる可能性はあります。

lineheight: 1.5 だとフォントサイズ×1.5ということなので、 font-size: 36px;なら 30px×1.5=54pxになりますね。chromeではそうなってました。

Answer 2

背景の高さ =（フォントのサイズ + line-heightから導き出される高さ）×　行数

※paddingは0での計算

※記憶を頼りに書いたので間違っている可能性あり

幅の表記を間違っていたので修正しました。
はてなさんが正しいです。