描述
作爲
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/
需求
