マークアップの相違点

Question

このマークアップの違いは何ですか？

<div class="pic"> 
<img src="http://www.lorempixel.com/333/333" alt=""> 
</div> 

CSS

.pic { 
width: 600px; 
background: red; 
} 

今私は私の背景を見ることができますが、私は怒鳴るような別のマークアップをしたとき..私は把握することはできません。..

別のマークアップ：

<img class="pic" src="http://www.lorempixel.com/333/333" alt=""> 

同じスタイル..

Answer 1

最初のケース：

.pic { 
 
width: 600px; 
 
background: red; 
 
}

<div class="pic"> 
 
<img src="http://www.lorempixel.com/333/333" alt=""> 
 
</div>

ここのimg要素はdivタグ内にある、あなたはDIVタグに割り当てられている600pxの幅が含まれているのdivすなわち.picのためのいくつかのCSSを指定しています。

そして、ある程度の大きさを持つdivタグの中にimgタグが読み込まれます。 この画像サイズは600pxより小さいので、背景の色を見ることができます.600pxより大きい場合は、そのdivからも出てきます。

第二の場合：ここで

.pic { 
 
width: 600px; 
 
background: red; 
 
}

<img class="pic" src="http://www.lorempixel.com/333/333" alt="">

あなたが直接、imgタグにそのCSSを割り当てられました。 imgタグの幅は600ピクセルです。ここで背景色は見えません。