这是display的一个属性,规定元素生成的框类型为“行内块元素”,早在CSS2已经被广泛支持。所谓行内块元素,就是既有行内元素的性质(排在一行)又有块级元素的性质(能设置宽高)。当然行内元素有占位属性的也能设置宽高,比如IMG,这里只是针对绝大多数。
既然属性的兼容性很好,那么对于前端来说是很激动的一件事。所以我一般在需要横排的结构数量较少时会选择该属性。
inline-block默认间距。
这个问题之前一直没有发现,在我写一个选项卡的list的时候用到了该属性,在没有给任何margin的情况下各个tabs之间存在了5px左右的间距,在检查CSS初始化没有问题的时候呢,我将问题的产生原因定位到了inline-block上,结果网上一搜果然如此。各大神早对这个问题的来龙去脉搞得很清楚了。
产生原因:标签段之间的空格导致的,这不是BUG,应该是设计语义化所致。
解决办法:①去除html中空格(不推荐)②负margin③font-size:0④字符间距处理等。使用情况
以上默认间距的处理办法都是一些前端大神已经整理过的,当然还有很多的解决办法,写这篇文章的重点不是怎么去解决默认间距的问题,而是明白怎么去使用inline-block.当明白了这个属性的特点和一些注意事项后,在以后布局使用该属性会更加得心应手。
①宜少不宜多,对于三个以下的横排元素用该属性会比较好,普通的导航或需要脱离文档定时触发的元素还是老老实实用float。
②横排元素间距大于inline-block的默认间距的时候可以用该属性。如果小于或者没有不推荐,原因是用兼容性的写法去搞定默认样式会带来不必要的问题。如果非要这样做,我个人推荐使用②的方法。