inline-block的简单理解

1. 概念display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性，甚至更多，比如 inline-block 元素也可以设置 vertical-align 属性。inline-block 后的元素就是一个格式化为行内元素的块容器。其他的内联元素可以和其显示在同一行，中间允许有空格。

2. 使用

   （1） display:inline-block可以用来处理行内元素不等高对齐排列问题（列表布局），防止出现过高元素下方没有元素排列，而是被挤到该元素的右下方。（vertical-align: top/bottom;设置对齐的基准线）

（2）修正IE6中浮动元素的双边距问题

（3）水平放置多个类似块blo ck元素而不需要使用float

（4）使一个inline元素具有高宽边距而其依然能够保持inline

3. 水平间隙问题

    关于使用display:inline-block带来的水平间隙问题，产生该水平间隙的原因主要是HTML中的换行符、空格符、制表符等合并为空白符，在字体不为0的情况下，空白符将会产生一定的宽度，即产生了元素间的水平间隙。

解决该水平间隙的方法有：（1）字体大小设置为0，即font-size:0；此时要注意父元素字体大小设置后会影响到子元素字体大小，要记得将子元素字体大小重置！（2）合理地设置letter-spacing的值（负值）！（3）合理地设置word-spacing的值（负值）！（4）前一个标签的结束标签和后一个标签的开始标签连续使用，或者后一个嵌套标签的结束标签连续使用，不空格！合理的使用（1）（2）（3）（4）的css hack可以解决display:inline-block后元素间的水平间隙问题。

4. IE下实现display:inline-block的方法

（1）先使用display:inline-block触发块元素，然后再定义display:inline，让块元素呈递为内联对象。两个display要放在两个css声明中才能生效。

div {display:inline-block;...}
    div {display:inline;}

（2）直接让块元素设置为内联对象display:inline;再触发layout，如zoom：1；

div {display:inline; zoom:1;...}