行内元素外边距的有关问题 _HTML/CSS

行内元素外边距的问题

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>