为什么这个内联元素的顶部边框没有显示,为什么使用float更正呢？

Question

http://jsbin.com/ofojis/edit#preview

http://jsbin.com/ofojis/edit#source

1. 为什么此内联元素的顶部边框不显示？
2. 添加float:left将此内联元素向下推,并且渲染效果很好.float:left实际上如何将其推下来,是不是应该将元素推向左边？
3. 另外,你不应该在内联元素上使用margin属性<span>吗？

Answer 1

在这个例子中如何呈现轮廓,边框和填充的技术说明？？:)

1. 因为<span>是inline元素,元素的定位inline从填充的左上角开始(不计算边框和边距).

2. float: left适用display: inline-block,这意味着它不再存在inline.inline-block元素的定位从边距的左上角开始.

3. 你可以使用margina <span>但它不会做任何有用的事情:P