描述
作为 CSS2 visual formatting model 规范的成员之一，display: inline-block 其实并不是什么新鲜玩意儿，至少比 border-radius 神马的资历要老得多，但是悲剧的是其使用频率
并不十分广泛。我想说，在很多场景中，inline-block 是神器。其实严谨地说，从语义的角度出发，inline-block 在很多时候是必需的 display 方式，而不是一个作为“奇技淫巧”的存在。
表现
还是稍微说一下 inline-block 的表现好了。顾名思义，inline-block 规定让对象呈现出一种容纳于 inline 中的 block box 样式，即，inline-block 元素本身作为 inline 呈现，content 作为 block 呈现。相应地，有如下肉眼能观察到的 现象：
- 由于 inline-block 的 content 是 block，所以可以设置 width / height——inline 元素是无法设定尺寸的
- inline-block 接受所有能设定于 inline 的样式，比如 vertical-align
- 由于对外呈现为 inline 因此 inline-block 的上下 margin 不会和相邻 block 元素的 margin 合并
- 等等
兼容性
作为早期的 display 属性之一，各大标准浏览器支持良好自不必说（FF2 曾支持不完全，不过这已经是历史了），至于 ie，在 ie8 中有完全的支持，ie7 以下似乎又是悲剧，不过，根据 MSDN 对 display 属性的 描述上来看，可以得知 IE 5.5 开始已经支持 inline-block 属性：
The inline-block value is supported as of Internet Explorer 5.5.
只不过需要小 hack 一下：
display: inline;
zoom: 1;
使用场景
在实践中，很多场景下都能动用 inline-block，比较常见的是以下几处。
用来取代 FLOAT 布局
假定有如下需求，见图（借用一下蓝色理想的图）：
需求
很容易想到对这个 gallery 中的每个 item 定义 float: left，使得它们能够一个接一个地往左漂移。但是 float 这个属性被设计的初衷并不是用来干这些大事情的，它最适用的场景是诸如图文混排的这种小地方，可惜现在很多的责任压在它的肩膀——“我感到压力很大”，float 说。重新思考，首先不考虑具体的布局实现，观察这个 gallery 是什么。我的观点是，这是一个
逐行呈现 item 的 list。list 中所有的 item 都是平凡的，不会彼此依赖或产生什么副作用，只是简单地一个接着一个地呈现，所谓逐行呈现。那么可以说，这一坨东西是 inline 的。又考虑到每个 item 不是简单的诸如文本、链接这样的 inline 元素，而是复杂的盒子。那么综合这两点，可以很自然地得出结论——用 inline-block 来呈现这个 list。
VERTICAL-ALIGN
y 轴上的对齐问题也很让人头疼，比如垂直居中。对于垂直居中问题，最直接的想法是借助 display: table-cell 容器，因为表格单元格中的对象都可以设定 vertical-align，可惜 IE7- 再次成为掣肘，再者，table-cell 也
并不十分合乎语义。思考一下，为何官方并没提供一个方法使得 block 元素能够控制 y 轴上的对齐？我的观点是：
- 垂直方向的对齐一般需要相邻的参照物，比如定义上下标的 sup sub 标签。而 block 元素占据整行，左右根本没有这种参照物，因此没有 vertical-align 的必要。
- 容纳 block 的元素必须也是 block（table-cell 等高级 display 方式先不管），而这个 block 容器默认都是 没有缝隙地 包裹着内部的 block 元素的（除非显式设定包裹容器的 height），既然如此，也就无所谓 block 需要相对于容器在垂直方向定位这种问题了。
虽然上述观点为 W3C 做了一番辩护，但是的确有很多场景需要 block 元素相对于定高容器垂直居中。那么，由于 inline 元素是可以自然地 vertical-align 的，因此将需要设定垂直居中的对象设定为 inline-block，同时引入一个冗余的兄弟元素同样设定为 inline-block，并且 height: 100%，再设定两者都为 vertical-align: middle。由于两者对外呈现为 inline，因此能相互在垂直方向居中对齐，同时冗余元素是 100% 的高度，所以我们的目标元素相当于在容器中垂直对齐了。
结论
inline-block comes first!参考文献
- http://www.w3.org/TR/CSS2/visuren.html
- http://msdn.microsoft.com/en-us/library/ms530751(VS.85).aspx
转自： http://www.pushiming.com/blog/2010/10/inline-block-comes-first/
