关于行内元素间隔1px的问题

导读：

实现水平导航栏常用的两种方法：行内元素(inline-block)和浮动(float)。在实现这两种方式时有什么区别不同呢？我们来看下效果：

1、行内元素(inline-block)

 

行内元素之间始终存在1px间隔，那么这些间隔是什么原因导致的呢？一般是由于换行符，tab(制表符)，空格符等导致的。如何解决呢？我们可以把制表符、换行去掉，但是这样就导致我们的代码可读性不高。

2、浮动(float)

设置为float:left;属性时元素脱标导致行内元素滑向彼此，浮动元素之间是紧挨着的，元素之间的间隔仅为开发人员设置的border的1px间隔。