display:inline-block

/* inline爲行內元素不自動換行，不佔用文檔流，也就是說你在這個後面寫一個元素
這個元素會並排顯示。block爲塊元素，單獨佔一行文檔，並能夠給這個塊元素添加
寬高背景顏色。而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;">連接一& 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>

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