理解和解决行内元素的联动现象~~

<div>

    <span id="f"></span>

    <span id="s"></span>

</div>

    在一个父级div里，放2个span，然后它们都加了display:inline-block，这个时候要调节其中第2个span离父div的margin值，于是给它加了个margin-top:10px，没想到第一个<span>也动了起来，所谓“联动”。

    我这里忽视了行内元素的本质概念，行内行内则都在一行里，那么第2个span如果设置了margin-top，则这行都会有一个margin-top值，所以才会出现联动现象。

    解决办法就是让它们变成block块元素，都加上display:block，然后进行float。这个时候它们虽然视觉上是同一行的，但是都是块级元素，相互独立，于是对其中任何一个进行margin的设置，不会影响到其它。。。还有个办法就是干脆2个span一开始就设置成div+float，也不会出现这个问题。