css之inline-block

这是display的一个属性，规定元素生成的框类型为“行内块元素”，早在CSS2已经被广泛支持。所谓行内块元素，就是既有行内元素的性质（排在一行）又有块级元素的性质（能设置宽高）。当然行内元素有占位属性的也能设置宽高，比如IMG，这里只是针对绝大多数。

既然属性的兼容性很好，那么对于前端来说是很激动的一件事。所以我一般在需要横排的结构数量较少时会选择该属性。

inline-block默认间距。

这个问题之前一直没有发现，在我写一个选项卡的list的时候用到了该属性，在没有给任何margin的情况下各个tabs之间存在了5px左右的间距，在检查CSS初始化没有问题的时候呢，我将问题的产生原因定位到了inline-block上，结果网上一搜果然如此。各大神早对这个问题的来龙去脉搞得很清楚了。

产生原因：标签段之间的空格导致的，这不是BUG，应该是设计语义化所致。

解决办法:①去除html中空格（不推荐）②负margin③font-size:0④字符间距处理等。

使用情况

以上默认间距的处理办法都是一些前端大神已经整理过的，当然还有很多的解决办法，写这篇文章的重点不是怎么去解决默认间距的问题，而是明白怎么去使用inline-block.当明白了这个属性的特点和一些注意事项后，在以后布局使用该属性会更加得心应手。

①宜少不宜多，对于三个以下的横排元素用该属性会比较好，普通的导航或需要脱离文档定时触发的元素还是老老实实用float。

②横排元素间距大于inline-block的默认间距的时候可以用该属性。如果小于或者没有不推荐，原因是用兼容性的写法去搞定默认样式会带来不必要的问题。如果非要这样做，我个人推荐使用②的方法。