关于margin-top/bottom在non-Replaced inline元素上(如span)不起作用的解释

margin-top/bottom have no effect on non-replaced inline elements。（参见css2.1规范）

但是为什么就不支持呢？

本人觉得可以这样解释：

像这样一个结构

<span class=”a”>xxxxxxxxxxxxxxxx</span><span class=”b”>——————</span>

效果大概如下

xxxxxxxxxxxxxxx————-

假如inline元素支持margin-top，而margin-top的参照基准是前一个元素（当然，考虑复杂情况的话，这么说是不正确的,比如
前一元素是脱离文档流的元素，或者根本没有前一元素而只有上级元素，等等）。那么给b相对a的设置一个margin-top值，这个效果会是怎么呢？

这样？

xxxxxxxxxxxxxxx

————-

还是这样？

xxxxxxxxxxxxxxx

                                     ————-

但不管是怎样，这都和inline元素的定义相悖。inline元素，从字面上就可以理解，他是在(in)一行(line)上的！

这就是为什么inline元素当初设计的时候不让它支持margin-top/bottom。

同样他（非可置换inline元素）也不支持height（和width）。取而代之的是line-height，意思就是行高。因为inline
元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？都说不过去啊！

 

所以统一都给每行定一
个高，这就是line-height了。