img元素后，margin-top不起作用

Question

why is it happen?

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS"
 style="width:200px; height: 200px;"></img>

<span style="margin-top: 300px;">my text</span>

this is my jsfiddle:

http://jsfiddle.net/8sxFT/1/

I know I can add display: block to the span and then margin-top will work.

but why isn't it working now? I closed the img element..

any help appreciated!

Answer 1

Span element is inline element not a block element. So they ignore vertical margin value.

Solution is you can make the span element display:inline-block; Now you can use margin property.

Check this Demo jsFiddle

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS" style="width:200px; height: 200px;"></img>
<br />
<span style="margin-top: 300px;display:inline-block;">my text</span>

Answer 2

you are forgetting to use the float:leeft or right try it
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2FCIU0MAB5Op7RAt-5u576obOi-9JKtseSgYJDMdhAc04mKoS' style="float:left;width:200px; height: 200px;">

<span style="float:left;margin-top: 300px;">my text</span>
you don't need to close the img tag as you did < /img>