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

Question

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

この上の写真に大きさのcssを適用させたいです。

``` ```CSS .parent{ height:600px; width:600px; } ``` この上のコードのようにした場合、うまくCSSが適用されません。しかし、上記のCSSのコードを ```CSS .child{ height:600px; width:600px; } ``` とするとCSSがうまく適用できます。どうしてでしょうか。理由がわかりません。回答の程、よろしくお願いいたします。 ### 皆様の回答を受けて回答ありがとうございます。皆様のおかげで、なぜ```img```のクラスに直接```css```を適用させないといけないかわかりました。しかしそこで、また新たな疑問が生じました。 0. ```div```に適用した```css```はその中にあるインライン要素には影響を与えないという事ですか。つまり、```div ```内にあるインライン要素(```a```タグや```span```など)は個別に```css```を設定しなければいけないという事ですか 0. 上記の内容と重複するかもしれませんが、```div```タグはその間に入れたタグ全て```css```の内容を適応させるのではないのですか。例えば、```div```内で```display:block```としたときインライン要素も含めて全ての要素が```block```要素にならないのですかこれらについても回答お願いします。

Accepted Answer

質問のHTMLは、 ```html

この上の写真に大きさのcssを適用させたいです。

``` の間違いだとして、 > [: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Styling_with_CSS) は置換要素です。 display の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。 imgは既定ではインライン要素なので親要素の幅の影響は受けず、width height を指定しなければ画像自身のサイズで表示されるということです。

Answer

回答ありがとうございました。
皆様のおかげで何に引っかかっていたのかがわかりました。
それは、親要素からのcssの継承でした。
[継承できるプロパティ一覧](https://www.tagindex.com/stylesheet/properties/)
[cssの適用優先度](https://techracho.bpsinc.jp/hachi8833/2016_10_04/26662)
これらが参考になりました。

Answer

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

Answer

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

この上の写真に大きさのcssを適用させたいです。 ``` 【: 埋め込み画像要素 - HTML: HyperText Markup Language | MDN】 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Technical_summary](https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#Technical_summary)

皆様の回答を受けて

関連した質問