在img元素之后,Margin-top不起作用

时间:2014-03-08 19:48:00

标签: html css

为什么会发生?

<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元素..

任何帮助表示赞赏!

2 个答案:

答案 0 :(得分:1)

Span元素是内联元素而不是块元素。所以他们忽略了垂直保证金价值。

解决方案是你可以制作span元素display:inline-block;现在你可以使用margin属性。

检查此 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>

答案 1 :(得分:1)

你忘了使用漂浮物:向左或向右试试它 <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标签&lt; / img&gt;