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

Question

為什么會發生？

<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>

這是我的jsfiddle：

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

我知道我可以添加display: block到跨度，然后margin-top將起作用。

但是為什么現在不起作用？ 我關閉了img元素。

任何幫助表示贊賞！

Answer 1

跨度元素是內聯元素，不是塊元素。 因此他們忽略了垂直邊距值。

解決方案是可以使span元素display:inline-block; 現在您可以使用margin屬性。

檢查此演示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

您忘記使用float：leeft或正確嘗試
<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>
您不需要像以前那樣關閉img標簽</ img>