divに適用させたcssがその中のimgに反映されない理由について

Question

ProgeteというサイトでHTMLとCSSの勉強をしている者です。
早速ですが、件名にあるようにdiv要素とその中にあるimgにclassで名前をつけて、divのみにcssを適用させたときに反映されない理由について質問したいです。
例として

<div class=parent>
    <img class=child src="#">
    <p>この上の写真に大きさのcssを適用させたいです。
    </p>
</div>

.parent{
   height:600px;
   width:600px;
}

この上のコードのようにした場合、うまくCSSが適用されません。
しかし、上記のCSSのコードを

.child{
   height:600px;
   width:600px;
}

とするとCSSがうまく適用できます。
どうしてでしょうか。理由がわかりません。
回答の程、よろしくお願いいたします。

皆様の回答を受けて

回答ありがとうございます。
皆様のおかげで、なぜimgのクラスに直接cssを適用させないといけないかわかりました。
しかしそこで、また新たな疑問が生じました。
0. divに適用したcssはその中にあるインライン要素には影響を与えないという事ですか。つまり、div 内にあるインライン要素(aタグやspanなど)は個別にcssを設定しなければいけないという事ですか

1. 上記の内容と重複するかもしれませんが、divタグはその間に入れたタグ全てcssの内容を適応させるのではないのですか。例えば、div内でdisplay:blockとしたときインライン要素も含めて全ての要素がblock要素にならないのですか

これらについても回答お願いします。

Comments

[javahack]

teratail的には、元の質問が解決したらベストアンサーを選んで解決済みとして、新たな疑問は新しく質問を立てた方が良いと思います。
新しい質問の文中に本質問へのリンクをつけておけば繋がりもわかるので。

Answer 1

質問のHTMLは、

<div class=parent>
    <img class=child src="#">
    <p>この上の写真に大きさのcssを適用させたいです。
    </p>
</div>

の間違いだとして、

<img>: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN
<img> は置換要素です。 display の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。

imgは既定ではインライン要素なので親要素の幅の影響は受けず、width height を指定しなければ画像自身のサイズで表示されるということです。

Answer 2

img要素は仕様上 内包要素を持ちません。

    <img class=child src="#">
    <p>この上の写真に大きさのcssを適用させたいです。
    </img>

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

Answer 3

parentはあくまでもdivに設定されているからです。
divはブロックレベル要素と言ってCSS等で設定しなければ透明の要素で何も見えず、
タグの間に含めた別なタグをまとめたりするのが役割です。

その見えない要素に幅や高さを設定しているので見た目では何も変わらないように見えるのです。

Answer 4

回答ありがとうございました。
皆様のおかげで何に引っかかっていたのかがわかりました。
それは、親要素からのcssの継承でした。
継承できるプロパティ一覧
cssの適用優先度
これらが参考になりました。