为什么这个内联元素的顶部边框没有显示，为什么使用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

Technical explanation of how outline, border and padding are rendered in this example?？ ：）

1. 因为<span>是inline元素，inline元素的位置从填充的左上角开始（不计算边框和边距）。< / p>

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

3. 您可以在margin上使用<span>但不会做任何有用的事情：P