在開始用display：inline-block的時候，只知道有baseline這麼一說，而且當時記筆記解決了空隙問題，百度一堆文章，什麼終極解決辦法等等，還記錄了一些問題，當時不明白，到今天才明白verticle-align的用法，原來可以這麼用，以後可以隨便玩inline-block，還有CSS hack，還有UC瀏覽器，這幾天寫的進哥的嘿鳳梨首頁在手機UC直接換行了，可能是間隙問題。。。bug。今天晚上弄了好久，才發現baseline和verticle-align，進一步認識了inline-block。

有用的是這句話：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我直接用的百分比懟上去的~

在此貼上我的筆記

-----------------我是可愛的分割線-------------

1.寬度百分比，設定無間隔inline-block排版
inline-block 後的元素就是一個格式化為行內元素的塊容器
預設inline-block之間會有間距，有很多清除間距的方法如html中間無空格；父盒子設定font-size: 0;-webkit-text-size-adjust:none;


 inline-block 元素可設定 vertical-align 屬性。


2.IE相容inline-block：
IE5.5 後開始支援 inline-block， 但是它所支援的 inline-block 不能等同於 CSS2.1 中的 inline-block，因為 IE5.5 比 CSS2.1 更早提出 inline-block 的概念並作為所謂的「私有屬性值」使用，所以二者表現出來的效果是不完全一致。
IE 5.5、6、7 、8（Q）中 block 元素對 inline-block 支援不完整，如果要達到類似的效果，需要先設定為 display:inline，然後使用 zoom:1 等觸發 hasLayout。
IE 5.5、6、7 、8（Q）中 inline 元素欲達到 inline-block 的效果只需直接設定此屬性值或使用 zoom:1 等均可。;(zoom觸發haslayout)


3. 去除 inline-block 空隙終極解決方案
.dib-wrap {
font-size:0;/* 所有瀏覽器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 會導致脫離普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支援字型大小為 0 的瀏覽器, N 根據父級字型調節*/
}
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}


/*問題*/
1、display：inline-block，是基於baseline對齊的，大小不一會導致上下不齊，所以設定的時候最好設定vertical-align屬性。
2、圖片的寬度設定是100%自適應的，長寬高不一致會導致頭像顯示不完整，如上面，成半圓了，所以設定成max-height:100%；

-----------------我是可愛的分割線-------------

以下是轉載的文章【http://www.xuebuyuan.com/825857.html】

故事：

最近在使用3個span（或div）製作帶圓角邊框的按鈕時，按照常識，把span的display設定成inline-block，這樣就可以設定span的width和height了，很爽的~

可是當我在中間的span寫上文字的時候，神奇的事情發生了：

是的，寫上字的那個span掉下來了，掉落，排版錯位，很噁心的東西！使用Chrome的開發者工具檢視，css和盒模型沒有半點問題，鬱悶中……

仔細觀察發現，掉落的高度貌似跟文字的高度差不多，試了下，如果把文字字型加大，發現變成這樣了：

是的，有文字span向上移動了一些！也就是說，掉落的那個、有文字的span的掉落程度跟它上面的文字的大小有關係，文字的大小代表什麼？大號文字的重心明顯比小號文字的重心高，於是把字型改回原來的樣子，然後試著使用vertical-align直接修改文字的重心位置為：

vertical-align:top

得到這樣的結果：

成功了！有文字的span跟沒有文字的span對齊啦！

原因：

很明顯是vertical-align設定錯誤的問題，谷歌了下vertical-align的用法，找到如下連結：

CSS屬性Vertical Align使用方法講解

http://www.jzxue.com/wangyesheji/css/201006/11-3937.html

大體意思是，vertical-align只用在display屬性inline或inline-block的情況下才能使用，預設為baseline，就是“display屬性inline或inline-block”的控制元件的底端跟文字的baseline（基線）對齊：

所以，在設定vertical-align之前，左右兩個沒有文字的span的底端跟中間那個有文字的span裡的文字的基線對齊了，所以中間那個span就下降了文字高度的尺寸。而改變文字的尺寸後，基線隨之被提高，然後中間有文字的那個span也就跟著上去了。設定vertical-align:top後，左右兩邊的span的top跟中間span的top對齊，問題解決了~

示例程式碼

順帶轉載那篇文章吧~

CSS有一個屬性叫Vertical Align。當你第一次學習它的時候會有些困惑，因此我覺得我們可以通過它的用法來了解它。最基本的用法像這樣：

img{ 
vertical-align: middle; 
}

注意在這個應用案例中，它被應用到了img元素上。圖片通常是行內元素，意味著它通常是和文字在一起的。但是到底”在一起”確切的是什麼意思？這就是Vertical-align所要解決的。

有效值為：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我認為最讓人使人困惑的是，當大家嘗試著給塊級元素使用vertical-align時，卻得不到任何結果。如果你有一個大一些div，其中包含一個小的div，你希望小的能夠在大的之內垂直居中對其，vertical-align沒法幫到你。Douglas Heriot有好方法來實現這種效果。

Baseline

vertical-align預設的值就是baseline（如果你沒有做任何宣告的話）。圖片會和文字以文字基線為準對其。注意下行字母降到了基線以下。圖片不會和下行字母的最下端對齊，那不是基線。

Middle

也許vertical-align的最常用的用法是給圖示大小的圖片設定為”middle”。結果有著跨瀏覽器的一致性。

瀏覽器能夠讓文字和圖片精確的對齊：

要小心如果圖片比當前文字和行高要大的話，在需要的時候它會將下面的線條向下推：

Text-bottom

和基線不同，它是文字的底端，是下行文字靠近的方向。圖片也可以很好的和它對齊。

Text-top

和text-bottom相反的就是text-top，當前文字的最高點。你也可以依次對齊。注意下面的文字，Georgia字型，最上端要比圖片高出一點。

Top和Bottom

Top和Bottom類似於text-top和text-bottom，但是他們不受文字的限制，依賴於所在行的所有東西（比如另外一張圖片）。因此如果一行有兩張圖片，不同的高度，而且都要比所在行的文字大，它們的頂端（或者底端）就會對齊，而不理會文字的大小。

Sub和Super

這兩個值的意思是上標和下標，因此元素按照這個方式對齊自身如下：

在表格中垂直對齊

不像圖片，表格預設為居中垂直對齊：

如果你希望文字與表格的頂部或者底部對齊，應用top或者bottom對齊。

當給表格應用vertical-align時，是靠頂部、底部還是居中對齊要看運氣。沒有一個值是能夠解釋的通的，不同的瀏覽器有不可預料的結果。比如，在表格中給文字應用text-bottom對齊方式時，IE6中是在底部，Safari4中是在頂部。設定為sub，IE6中是在中間，Safari4中是在頂部。

Vertical Align和Inline-Block

圖片，從理論上來說是行內元素，表現上卻像是行內塊級元素。你可以給它設定高度和寬度，它會遵守，不像其它行內元素。

給行內塊級元素應用vertical-align，表現就像如上圖片那樣，這是vertical-align是最少讓你擔心的。但是那是另外一個故事了……

不要使用縮寫

通常你會在表格中看到”valign”來實現垂直對齊。比如，<td valign=top>。需要說明的是這種縮寫是不應該使用的。真的沒有任何理由這樣使用CSS。