Bapy Mridha Bapy Mridha -4 years ago 113
CSS Question

What is the different between the markup

I am confuse what is the different between this markup.

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


css

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


now i can see my background but when i did another markup like bellow.. i can't figure out..

another markup:

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


same style..

Answer Source

First case :

.pic {
width: 600px;
background: red;
}
<div class="pic">   
<img src="http://www.lorempixel.com/333/333" alt="">
</div>

Here img element is inside the div tag and you have specified some css for div i.e .pic which contains width of 600px which is assigned to div tag.

And img tag loads inside that div tag which takes some size that it has. This image size is lesses than 600px so you can see background color.If it would be larger than 600px it come out of that div also.

Second case:

.pic {
width: 600px;
background: red;
}
<img class="pic" src="http://www.lorempixel.com/333/333" alt="">

Here you directly assigned that css to img tag. so img tag takes width of 600px. so we can't see any background color here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download