divとimgによるCSSへの反映の違い

Question

コード

<div class="header-left"> <img class="logo" src=""> </div>

発生している問題・エラーメッセージ

この時に、CSSでdivのクラスに対して「float」、「width」、「padding」を指定した場合とimgのクラスに「float」、「width」、「padding」を指定した場合とでは結果が違ったのはなぜでしょうか？

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[maisumakun]

どのプロパティにどんな値を指定して、どのような違いがあったのでしょうか？

[rotor]

float: left; width: 124px; padding-top: 20px; をどちらにも指定しました。

header-leftに指定した時は、float: left; のみ反映され、logoに指定した時は、全て反映されているようです。

Answer 1

divはブロックレベル要素、
imgはインラインレベル要素だからです。

ブロックレベル要素 - HTML: HyperText Markup Language | MDN
インライン要素 - HTML: HyperText Markup Language | MDN

またその中でも、divはコンテンツ分割要素、
imgは画像埋め込み要素、と、
用途も仕様も違うからです。