記載のコードに関して、img要素の高さ(200px)と親要素の高さ(207px)が異なる理由が知りたいです。

前提・実現したいこと

img要素の親要素の高さが、なぜ207になるのか知りたいです。
親要素の高さを指定しなければ、子要素の高さと同じになると思っていました。

img要素の高さ：200

動作確認ブラウザは、google chromeです。

補足情報（FW/ツールのバージョンなど）

■以下HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

          <div class="icon">
            <p class="title a">こちらのpタグは親要素と高さが同じになっている</p>
          </div>

          <div class="icon">
             <img src="https://prog-8.com/images/html/advanced/html.png">
          </div>

</body>
</html>

■以下CSS

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

.icon{
  background-color:yellow;
  margin:30px;
}

.title{
  color:white;
  background-color:blue;
}

kei344

2019/08/13 12:03

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2019/08/13 12:25

>img要素の親要素の高さが、なぜ207になるのか知りたいです。どこで「207」という数字を把握されたのでしょうか。追記願います。

think49

2019/08/13 15:03

動作確認しているWebブラウザも書くべきと思います

mahr

2019/08/13 15:30

>kei344さんご親切にありがとうございます。編集しました。 >m.ts10806 ありがとうございます。説明不足ですいません。 chromeのブラウザでページを起動し、chromeのデベロッパー・ツールで確認しました。 >think49 ご指摘ありがとうございます。 chromeで動作確認しております。

行動規範の内容に同意します

回答1件

ベストアンサー

img要素は display の値が既定で inline なので、ベースライン分浮いています。
img要素にvertical-align: bottom;を設定するか、display: block; を指定すれば高さが同じになると思います。

【<img>: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Styling_with_CSS

投稿2019/08/13 15:29

kei344

総合スコア69407

mahr

2019/08/14 08:41

ご回答ありがとうございます。追加でご質問がございます。参考URL内の下記内容に関して ><img> にはベースラインがありません。 >つまり vertical-align: baseline を伴うインライン整形文脈内で使用したときに >画像の下端はコンテナーのベースラインに揃えられます。 divタグはブロック要素なので、vertical-alignは指定できないはずなのになぜ上記の挙動（imgの下端がdivタグのベースラインに合わさる）が適用されるのでしょうか。また、インライン整形文脈とは、インライン要素の内容領域という認識で宜しいでしょうか。お手数ですが、教えて頂けますと幸いです。