font-sizeプロパティについて

Question

<div class="header-logo"> <h1>Progate</h1> </div> というコードにおいて、.header-logo h1に対してfont-sizeを指定すると上手くいくのですが、.header-logoに対してfont-sizeを用いると、明らかに指定した値よりおおきくなります。 これはなぜでしょうか？

Answer 1

ブラウザさんが**「こいつh1使っとるやん！目立つように親要素より大きくしとこ！」**ってやってくれてるんだな～
デフォルトスタイルととリセットCSSで検索すると良いですよ

Answer 2

上位のHTML要素を引き継ぐならinheritを指定してください

<style>
.wrap1{background-Color:yellow;}
.wrap2{background-Color:lime;font-size:10px;}
.wrap3{background-Color:aqua;font-size:10px;}
.wrap3 h1{font-size:inherit;font-weight:inherit;margin:0px;line-height:1em;}
</style>
<div class="wrap1">
test
<h1>test1</h1>
test
</div>
<div class="wrap2">
test
<h1>test2</h1>
test
</div>
<div class="wrap3">
test
<h1>test3</h1>
test
</div>

Answer 3

他の回答にもあるように、各ブラウザは、<h1>にデフォルトのCSSスタイルを持っていて、その多くは「2em」等、親要素のサイズを基にした単位設定があります。

なので、<div class="header-logo">に、フォントサイズを20pxで設定した場合、

.header-logo {
  font-size: 20px;
}

親要素が「20px=1em」として、そこから子要素の**<h1>により「2em」が掛かるため、2倍の「40px」**となります。

直接、「.header-logo h1」でフォントサイズを指定すれば、「2em」が上書き（打ち消し）されるので、指定値をそのまま表示します。