【HTML/CSS】親要素に高さ指定をしたら子要素のサイズのほうが大きくなった理由は？

Question

前提・実現したいこと

CSSでブロック要素にサイズ（height）を指定してデベロッパーツールで確認したところ、
親要素よりも子要素の方がサイズが大きくなるという現象が発生しました。
親要素にサイズ（height）の指定をすれば、
子要素は親のサイズに収まるように表示されると思っていたのですが、
なぜこのような現象が発生するのでしょうか？

該当のソースコード

<div class="top-img">
  <figure>
    <img src="img/mainvisual.jpg" alt="トップ画像">
  </figure>
</div>

*{
  box-sizing: border-box;
}
.top-img{
  height: 600px;
  width: auto;
}

試したこと

"img/mainvisual.jpg"の画像サイズは、1920x1280です。
このとき、各要素の高さは以下のとおりとなり、親より子のサイズが大きくなり、
その以降に記述している要素（上記ソースコードでは割愛）と重なり合うような表示となっていました。

div(top-img) : 600px
figure : 1287.11px
img : 1280px

Answer 1

div.top-imgはheight: 600px;と指定しているとおりだし、imgも画像サイズどおりだし、heightはおそらくデフォルトでheight: auto;になっていて、中身（img）の高さ＋何か（マージンか何か）になっているのだろうから、何もおかしくないですね。

これに続くブロックはdiv.top-imgの下にレイアウトされますから画像と重なることになってしまいます。

div.top-imgにもheight: auto;を設定すれば中身の要素の高さになるはずです。

逆に、fighreにheight: 100%;を設定すればfigureの高さはdiv.top-imgと同じ600pxになり、さらに.top-img imgにheight: 100%;を設定すれば画像の高さも600pxになるはずです。
（ただしマージン等はたぶん別途調整が必要です）。

Comments

[nano_creator]

説明ありがとうございます。

親のサイズより子のサイズが大きいということは普通の現象なのですね。
親・子のheight指定がどうなっているかが重要とのことで理解しました。

ありがとうございました。