日期:2014-05-17  浏览次数:20801 次

行内元素外边距的问题
HTML code

<div style="margin:10px;background:blue">
    <span style="margin-top:20px;background:red;">aaaaaaaa</span>
</div>



<span>标签算是行内元素吧,但是为什么margin-top属性没发挥作用呢?它应该不会有重叠外边距的问题吧。

------解决方案--------------------
margin-top
margin-bottom 对 行内元素 无效,可以使用 padding
------解决方案--------------------
你在 <span>标签上再加个display:block;
margin就有效了
如:
HTML code

<div style="margin:10px;background:blue">
    <span style=" display:block;margin-top:20px;background:red;">aaaaaaaa</span>
</div>