display:inline-block引起的間隙思考（轉）

1、導火線

沒錯，總有一類屬性在助你輕鬆尋得捷徑的同時，也可爲你增添煩勞，好比本文的主謀display:inline-block。衆前端們所諸知，其做用是將 對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。然而不幸的是，它並無獲得全部瀏覽器的支持，好比 ie六、7和古老一點的firefox徹底無視它，因爲firefox的老版本幾乎已經從市場中消失，因此名義上firefox是支持 display:inline-block的，除此以外，偉大的chrome、Opera、Safari都能很好地支持。儘管如此，依然仍是能夠經過 hack的手段讓ie六、7兩位難兄難弟變得溫順，好比像這樣：

ul class="demo01">
	li><li>
	li><li>
	li><li>
	li><li>
	li><li>
	li><li>
<ul>
<</</</</</<//

代碼:

.demo01{width:327px; margin:0 auto;}
.demo01 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999;}

代碼:

須要解釋的是，display:inline-block在IE下僅僅是觸發了layout，而它本是行佈局，觸發後，塊元素依然仍是行佈局。因此需讓塊 元素呈遞爲內聯對象，display:inline則起到了這一做用（*號只被ie六、7所識別），而後再經過zoom:1觸發layout。便可實現所 謂的inline-block。但事情遠遠沒有結束，這個傢伙面臨多項後事須要您來處理，好比會默認有外邊距(ie六、7除外)。而在這一問題以前，你也 許須要放鬆一下，來看看下面這樣一個現象。

2、是什麼引起了間隙

上面提到，儘管inline-block默認會存在間隙，那麼當咱們試圖對其中的某一個元素單獨設置margin-bottom或者padding-bottom時（固然你也能夠試着設置margin-top或者padding-top），它會呈現如下模型：

這意味着什麼？ 咱們能夠藉助vertical-align:top;這個屬性來消除垂直間隙。

如此多奇異性讓咱們對css充滿着好奇與不解，也許正由於如此才讓浮動式佈局成爲主流。在文中的第一部分提到：inner-block容許空格，這是否又意味着什麼？在一番剖析以後，咱們驚奇地得出了答案：罪魁禍首是包括換行在內的空白符。

因而咱們立馬消除空格、換行等傢伙，結果驗證了這種推斷的正確性。但這並非好的解決方案，由於在複雜的html組合體之間，咱們很難避免出現換行之類的空格。解鈴還需繫鈴人，css引起的現象，理應由css自己來解決不是嗎。

3、最終的統一

也許囉嗦得太多不必定是好事，那麼幹脆看下咱們所須要的最終模型吧

.demo02{width:306px; margin:0 auto; font-size:0;}
.demo02 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top;

代碼:

讓這一問題獲得握手的，是font-size:0; 固然，vertical-align:top;也算是半個功臣，儘管當font-size出現時，他的做用已經再也不重要。

原地址：http://sentsin.com/web/23.html