img元素間空白的解決方法

為了做滾動的幻燈片，需要把一張張接起來，然後再逐張呈現，可是排列好後，每兩張圖中間出現了空白（padding,margin已經都是0），而且寬度不可知，這樣用js來寫動畫的時候顯然不好判斷，於是google之，得到下面的解決辦法，結合本人實際情況備註如下：

1、將轉換為塊級對像

即，設定img為：

display:block;

在本例中新增一組css**：

#sub img

2、設定的垂直對齊方式

即設定的vertical-align屬性為「top，text-top，bottom，text-bottom」也可以解決。如本例中增加一組css**：

#sub img

筆記：我的**中失效

3、設定父物件的文字大小為0px

即，在#sub中新增一行：font-size:0;可以解決問題。但這也引發了新的問題，在父對像中的文字都無法顯示。就算文字部分被子對像括起來，設定子對像文字大小依然可以顯示，但在css效驗的時候會提示文字過小的錯誤。

筆記：我選擇了這種方法

4、改變父物件的屬性

如果父物件的寬、高固定，大小隨父對像而定，那麼可以設定：overflow:hidden;來解決。如本例中可以向#sub中新增以下**：width:88px;height:31px;overflow:hidden;

筆記：在我的例子中正好父容器必須是over:visible的，未測試

5、設定的浮動屬性

即在本例中增加一行css**：#sub img 如果要實現**混排，這種方法是很好的選擇。

筆記：這個肯定是可以的，但如果之前你沒有float:left，顯然你要去重新寫一些css

6、取消標籤和其父物件的最後乙個結束標籤之間的空格。

這個方法要強調下，在實際開發中該方法可能會出亂子，因為在寫**的時候為了讓**更體現語義和層次清晰，難免要通過ide提供**縮排顯示，這必然會讓標籤和其他標籤換行顯示，比如說dw的「套用源格式」命令。所以說這個方法可以供我們了解出現bug的一種情況，具體解決方案的還得各位見招拆招了。

筆記：最笨的辦法，而且只能解決ide的空格引起的空白，不是瀏覽器強行解釋的空白

補充：我選擇的使父元素font-size為0，有使父元素直接的text消失的危險，而且還是出現了一到兩個畫素的空白，最後發現還是第6條解決了我的問題。。。