display:inline-block; 到底是什麼

display:inline; 內聯元素，簡單來說就是在同一行顯示。
display:block; 塊級元素，簡單來說就是就是有換行，會換到第二行。
display:inline-block; 就是在同一行內的塊級元素。

說概念太模糊，來個真實案例吧。

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">鏈接一&lt;/a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">鏈接一&lt;/a>

A默認就是一行，所以inline用在這裏是廢的。寬高度設置也是費的。

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">鏈接一&lt;/a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">鏈接一&lt;/a>

塊狀，這裏高寬度就生效了，但是因爲是塊狀，前後有換行符，所以這是兩行了。

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;"&gt;鏈接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;"&gt;鏈接一</a>

這樣就是同時達到塊狀，而且在同一行顯示。


inline-block 的元素既具有 block 元素可以設置寬高的特性，同時又具有 inline 元素默認不換行的特性。當然不僅僅是這些特性，比如 inline-block 元素也可以設置 vertical-align 屬性。
HTML 中的換行符、空格符、製表符等合併爲空白符，字體大小不爲 0 的情況下，空白符自然佔據一定的寬度，使用inline-block 會產生了元素間的空隙。