最近制作中有遇到過未知大小圖片未知容器里底部對齊的效果， 如下圖所示：

?

?

有用到display:inline-block做這個效果， 通過實踐會發現在FF下相鄰的inline及inline-block的元素而產生的莫名其妙的空白間距如下圖所示：

?

?

這是因為，html中存在空格或者換行，就會有一個間距，就像兩相鄰的兩個a，默認情況下也會有間距，解決的辦法可以讓相鄰的inline及inline-block的元素沒有空格。顯然這樣不利用查看結構。怎樣有效的去掉這空白間距呢，方法如下兩種。

?

方法一：利用letter-spacing屬性，給外層容器的定義letter-spacing=-9px其中-9px是容器字體大小的一半，再對內部的inline-block的元素設置letter-spacing=0px。

?

可惜該方法對opera瀏覽器在無效

    *{margin:0px;
  padding:0px;
  }
img{border:none;}
#wrap{   
font-size:18px;   
letter-spacing:-9px;/*字號的一半*/    
}    
#wrap li{
display:-moz-inline-stack; /*針對于ff2.0*/     
display:inline-block;   
*display:inline; /*針對IE*/     
zoom:1; /*針對IE*/  
letter-spacing:0;
   
}    
#wrap li img{
vertical-align:bottom; 
position:relative; /*針對于ff2.0鏈接時出現的BUG*/
} 
  

?

    <ul id="wrap">    
<li><a href="#"><img src="images/1.jpg"></a></li>    
<li><a href="#"><img src="images/2.jpg"></a></li>    
<li><a href="#"><img src="images/3.jpg"></a></li>    
<li><a href="#"><img src="images/4.jpg"></a></li> 
<li><a href="#"><img src="images/5.jpg"></a></li>   
<li>更多圖片</li>    
</ul>
  

?

?

?

見附件中 dome1.html

?

方法二給外層容器的定義font-size:0，對內部的inline-block的元素設置font-size:12px，

?

該方法在chrome瀏覽器下還是會出現一點點空白

    *{margin:0px;
  padding:0px;
  }
img{border:none;}
#wrap{   
font-size:0;
}    
#wrap li{
display:-moz-inline-stack; /*針對于ff2.0*/     
display:inline-block;   
*display:inline; /*針對IE*/     
zoom:1; /*針對IE*/  
letter-spacing:0;
font-size:12px;
}    
#wrap li img{
vertical-align:bottom; 
position:relative; /*針對于ff2.0鏈接時出現的BUG*/
}
  

?

    <ul id="wrap">    
<li><a href="#"><img src="images/1.jpg"></a></li>    
<li><a href="#"><img src="images/2.jpg"></a></li>    
<li><a href="#"><img src="images/3.jpg"></a></li>    
<li><a href="#"><img src="images/4.jpg"></a></li> 
<li><a href="#"><img src="images/5.jpg"></a></li>   
<li>更多圖片</li>    
</ul>
  

??

?

?

見附件中 dome2.html

?

如果有時間讓我們來詳細了解一下display屬性inline-block值。其作用是“這個值導致一個元素產生一個塊狀盒模型（block box），而本身作為單一的內聯盒模型（inline box）流動排列（flow），類似一個被替代的元素。Display值為inline-block的元素內部形成一個塊狀盒模型，而本身形成類似一個內聯的被替代元素”。即display為inline-block的元素既可以像塊狀元素一樣定義高度寬度，又可以和內聯元素（比如文字）排列在一行。

?

Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 屬性，但 IE6、IE7要實現類似inline-block的效果，可以先觸發layout，再設置為inline，需要注意的是這兩個display必須在兩個CSS聲明中才有效

    #wrap li{
    display:inline-block;
}
#wrap li{
    display:inline;
}

  

?

或者直接設置為inline，再利用zoom來觸發layout來實現類似效果：

    #wrap li{
display:inline;
zoom:1;
}
  

?

Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有屬性。 在實際應用中 -moz-inline-box 會存在元素間的對齊等問題，雖然 Firefox 還有一個私有屬性 -moz-box-align 來幫助解決對齊問題，但依舊難以預料問題多多，而相對來說 -moz-inline-stack 的表現更像 inline-block ，這點可以在 Firefox3 中測試出來。但 -moz-inline-stack 使用時也會有一個 bug ，如果一個 display:-moz-inline-stack; 的元素外層元素是 display:inline; 即會使 Firefox 中其包含的鏈接不可點，這個需要用 position:relative; 來解決。

?

懌飛博客總結如下代碼：

    display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持，IE 下觸發 inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有屬性，也可以用 -moz-inline-box */
zoom:1; /*IE 下觸發 hasLayout*/
*display:inline; /*一旦IE 下觸發了 hasLayout，設置 block 元素為 inline 會使 display:inline 效果與 display:inline-block 相似*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隱藏文字，可用這四個屬性 */
/*另外上面隱藏文字，還可以用更簡化的方法：line-height:超級大值;font-size:0; */
overflow:hidden; /* 隱藏溢出的內容 */
vertical-align:middle; /* 行內垂直居中，針對 Opera 比較大的偏離 */
width:？px; /*？為任意非auto值*/
height:？px; /*？為任意非auto值*/
  

?

?

由display:inline-block擴展，現來了解塊級元素及行內元素。

?

display:block就是將元素顯示為塊級元素，

特點是總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。

?

display:inline就是將元素顯示為行內元素.

特點是： 和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

?

?

行內元素（inline elements，比如span,a,b等。）和塊元素(block elements，比如div,h1,p等)它們的區別可以分為下幾點：
塊元素會自動在末尾加一個換行，而行內元素不會。
塊元素可以定義自身的高度（width）和寬度(height),而行內元素不可以。
塊對象定義的自身垂直邊距可以改變行高，而行內元素雖然可以定義但改變不了行高。 ??

有關display:inline-block在FF出現空白的解決方案