要理解這個問題，首先要弄明白css對於 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的預設值是 baseline，這是乙個西文排版才有的概念。
vertical align的有效取值為baseline,sub,super,top,text-top,middle,bottom,text-bottom,length,或者是value in percentage。
（1）baseline：vertical-align的預設值為baseline（如果沒有宣告）。 影象將與文字基線處的文字對齊。
請注意，字母會下降到基線以下（比如字母p 、q、g 下面的小尾巴）。 影象則不會與字母的最低點對齊，因為那不是基線（而是基線以下）。
（2）middle：垂直對齊最常見的用法是在圖示大小的影象上將其設定為middle，瀏覽器可以很好的將影象與文字垂直對齊：
（3）text-bottom：與bottom不同，這個是文字的底部，下降到了最下方，影象也可以與此位置對齊：
（4）text-top：與文字底部相反，這個代表文字頂部，即當前字型大小的最高點。 您也可以與這個位置對齊
（5）top & bottom：top和bottom作用類似於text-top和text-bottom，但它們不受文字約束，而是在該行上的所有內容（如另乙個影象）。 因此，如果同一行上有兩個不同高度的影象，並且都大於該行上的文字，則它們的頂部（或底部）將與文字大小無關。
（6）sub & super：super和sub代表上標和下標，因此與這些方法對齊的元素也是一致的：
所以，baseline 和 bottom 之間有一定的距離。實際上，inline 的下面那一道空白正是 baseline 和 bottom 之間的這段距離。即使只有沒有文字，只要是 inline 的這段空白都會存在。
1、將轉換為塊級物件可去掉下邊空白
即設定img為：display:block;
2、設定的垂直對齊方式
即設定的vertical-align屬性為「top，text-top，bottom，text-bottom」也可以去掉下邊空白。
3、設定父物件的文字大小為0px
即在父物件中新增一行：font-size:0;可以解決空白問題，但這也引發了新的問題，在父物件中的文字都無法顯示，就算文字部分被子物件括起來，設定子物件文字大小依然可以顯示，但在css效驗的時候會提示文字過小的錯誤。
4、設定的浮動屬性也可去掉空白
即設定img元素float，如果要實現**混排，這種方法是很好的選擇。
5、設定父物件行高為0
top 和 bottom 之間的值即為 line-height。假如把 line-height 設定為0，那麼 baseline 與 bottom 之間的距離也變為0，那道空白也就不見了
6、改變父物件的屬性
元素底部為何有空白？
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 對比一下 vertical align 的另外兩個常見值，top 和 bottom 可以看...
元素底部留有空白
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 可以看到，出現在baseline下面的是 p 啊，q 啊,g 啊這些字母下面的那個尾巴。對...
img底部總是有空白
最近在做專案時，使用table，div，css布局，最頂部加入img 後，底部總是有空白 經過查詢了大量資料，問題總算是解決了。1 將轉換為塊級物件 即，設定img的style為 style display block 或是在本例中新增一組css img 經試驗，此方法可以解決。2 設定的垂直對齊方...