inline-block什么意思中文_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;...}