div要素へのCSSの適用について

Question

下記の2つの2つのCSSについて、違いがわかりません。
実行結果としては、1つ目のCSSを適用すると、4つの画像が画面横一杯に40pxずつ間隔をあけて配置されます。
ですが、2つ目のCSSを適用すると、3つ目の画像までは横一列で表示されますが、4つ目の画像だけ収まりきらず、3つの画像の下に表示されます。
私の考えでは、1つ目のCSSについてはブロック要素であるdiv要素にCSSを適用しているのに対し、2つ目のCSSはインライン要素であるimg要素にCSSを適用していることが関係していると考えています。ブロック要素だとちょうど画面幅一杯でおさまり、インライン要素だと収まらなければ改行される。というようなことがあるのでしょうか。また、この考え方で合っているでしょうか。

ご回答宜しくお願い致します。

<div class="sample1">
  <img src="http://www.xx.xx.aa">
  <img src="http://www.xx.xx.bb">
  <img src="http://www.xx.xx.cc">
  <img src="http://www.xx.xx.dd">
</div>

.sample1 {
  float: left;
  margin-right: 40px;
}

.sample1 img {
  float: left;
  margin-right: 40px;
}

Answer 1

1つ目のコードの場合

• sample1クラスにmargin-rightを指定しているので、divタグの右に40pxの余白ができる。

2つ目のコードの場合

• sample1クラスが設定されているdivタグの中にあるimg要素に右に40pxの余白ができる。

その2つのコードではそもそも横幅が変わっているので、画像の配置に違いが出ているのではないでしょうか？

Comments

[take_take]

ご回答有難うございます。私の考えでは、1つ目のコードの場合、divタグで囲っている全ての要素の右側に40pxの余白ができる。という認識でしたが、1つ目のコードでは画像の横には余白はできてないということでよろしいですか？

[s8_chu]

そうですね。クラスを設定したdivタグで囲っている全ての要素の右側ではなく、クラスを設定したdivタグの右側に40pxの余白ができます。

[take_take]

よくわかりました！有難うございました！