[英]Margin-top doesn't work after img element
为什么会发生?
<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:
我知道我可以添加display: block
到跨度,然后margin-top
将起作用。
但是为什么现在不起作用? 我关闭了img
元素。
任何帮助表示赞赏!
跨度元素是内联元素,不是块元素。 因此他们忽略了垂直边距值。
解决方案是可以使span元素display:inline-block;
现在您可以使用margin属性。
<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>
您忘记使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.