最近学习一个html,出现一个奇怪的现象，话不多说先贴代码。

`    
                
    
    
    
    
    
    
    
    
`----------

这是代码。。。

当初认为由于设置成了line-blcok之后，换行和空格都被解析造成的，然是后来已测试，发现根本不是这个原因造成的，最近经过自己的苦思冥想，查阅资料，竟然发现是vertical-align搞得鬼。

现在我来解释下原因，不过要明白的话，需要了解行高，基线等概念

    
                
    
    
    
    x我
    
    
    
    

效果：

可能大家没注意到：这个现象已经说明了原因，现在我来分下下：

1. 了解x;我们知道x的底部是基线，但是根据分析，基线下面应该有底线，底线下面有一半的行高，2.我们可以看到x是和div垂直平齐的，这个也是google浏览器默认的文本以基线居中，但是基线下面还有到底线的距离和半个行高。因此为了容下字体，下面的div需要向下移动  基线到底线的距离+一半的行高3.在google浏览器中，默认字体大小16px,ling-height是18px，我测量他们的缝隙是3px,就可以知道他们一半的行高是1px,基线到底线的距离是2px,总结：这个就是出现缝隙的原因所在了。

**

1.浮动。因为浮动不属于行内元素了。2.改变vertical-align的对齐方式，适应top,和bottom可以消除缝隙，注意：是用text_top 和text_bottom任然会出现缝隙但是比之前小一点，因为他们是跟字体对齐，换句话说，他们没有基线到底线的距离，只有一半行高的距离，所以缝隙会变小。