Was ist der Unterschied zwischen dem Markup

Question

Ich bin verwirrt, was ist der Unterschied zwischen diesem Markup.

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

css

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

jetzt ich meinen Hintergrund sehen, aber wenn ich habe eine andere Markup wie unten .. ich kann nicht herausfinden ..

eine andere Markup:

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

gleicher Stil ..

Answer 1

Erster Fall:

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

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

Hier img Element ist innerhalb des div-Tag und Sie haben einige CSS für div d.h .pic angegeben, die Breite von 600px enthält, die div-Tag zugeordnet ist.

Und img-Tag Lasten in diesem Div-Tag, die etwas Größe, die es hat. Diese Bildgröße ist kleiner als 600px, so dass Sie Hintergrundfarbe sehen können. Wenn es größer als 600px wäre, kommt es aus diesem div auch heraus.

Zweiter Fall:

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

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

Hier direkt Sie, dass CSS img-Tag zugeordnet. so img-tag nimmt breite von 600px. daher können wir hier keine Hintergrundfarbe sehen.