下記の2つの2つのCSSについて、違いがわかりません。
実行結果としては、1つ目のCSSを適用すると、4つの画像が画面横一杯に40pxずつ間隔をあけて配置されます。
ですが、2つ目のCSSを適用すると、3つ目の画像までは横一列で表示されますが、4つ目の画像だけ収まりきらず、3つの画像の下に表示されます。
私の考えでは、1つ目のCSSについてはブロック要素であるdiv要素にCSSを適用しているのに対し、2つ目のCSSはインライン要素であるimg要素にCSSを適用していることが関係していると考えています。ブロック要素だとちょうど画面幅一杯でおさまり、インライン要素だと収まらなければ改行される。というようなことがあるのでしょうか。また、この考え方で合っているでしょうか。
ご回答宜しくお願い致します。
HTML
1<div class="sample1"> 2 <img src="http://www.xx.xx.aa"> 3 <img src="http://www.xx.xx.bb"> 4 <img src="http://www.xx.xx.cc"> 5 <img src="http://www.xx.xx.dd"> 6</div>
CSS
1.sample1 { 2 float: left; 3 margin-right: 40px; 4}
CSS
1.sample1 img { 2 float: left; 3 margin-right: 40px; 4}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/03 11:42
2017/05/03 12:15
2017/05/03 12:24