display:inline-block

標籤：

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

 

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

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

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">連結一</a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">連結一</a>

A預設就是一行，所以inline用在這裡是廢的。寬高度設定也是費的。

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">連結一</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">連結一</a>

塊狀，這裡高寬度就生效了，但是因為是塊狀，前後有分行符號，所以這是兩行了。

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">連結一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">連結一</a>

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

display:inline-block