最近在做專案時，使用table，div，css布局，最頂部加入img（）後，底部總是有空白
經過查詢了大量資料，問題總算是解決了。
1、將轉換為塊級物件
即，設定img的style為：
style="display:block;"
或是在本例中新增一組css**：
#img
經試驗，此方法可以解決。
2、設定的垂直對齊方式
即設定的vertical-align屬性為「top，text-top，bottom，text-bottom」也可以解決。
如本例中增加一組css**：
#img 或
style="vertical-align:top;"
3、設定父物件的文字大小為0px
即，在#table中css中新增一行：
font-size:0;
可以解決問題。但這也引發了新的問題，在父物件中的文字都無法顯示。就算文字部分被子物件括起來，設定子物件文字大小依然可以顯示，但在css效驗的時候會提示文字過小的錯誤。
4、改變父物件的屬性
overflow:hidden;
來解決。如本例中可以向#table中的css新增以下**：
width:88px;height:31px;overflow:hidden;
5、設定的浮動屬性
即在本例中增加一行css**：
#img
如果要實現**混排，這種方法是很好的選擇。
6、取消標籤和其父物件的最後乙個結束標籤之間的空格。
這個方法要強調下，在實際開發中該方法可能會出亂子，因為在寫**的時候為了讓**更體現語義和層次清晰，難免要通過ide提供**縮排顯示，這必然會讓標籤和其他標籤換行顯示，比如說dw的「套用源格式」命令。
所以說這個方法可以供我們了解出現bug的一種情況，具體解決方案的還得各位見招拆招了。
本人借鑑、學習了網路朋友的解決方案，對自己也有了很大的幫助，在此感謝各位朋友。
img元素下有空白
在做專案裡乙個頁面的時候，要在頁面底部放一張長條的，我就直接放了個在最下面，為其設定了 width 100 ftp 到伺服器上去之後，以後就完工了，結果開啟手機一看，下面有一條白邊！各種嘗試 比如外面套個 div 之類 無果，就上網查了下。正好 segmentfault 裡有乙個類似的問題 為什麼 ...
元素底部留有空白
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 可以看到，出現在baseline下面的是 p 啊，q 啊,g 啊這些字母下面的那個尾巴。對...
元素底部為何有空白？
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 對比一下 vertical align 的另外兩個常見值，top 和 bottom 可以看...