很多初學小夥伴在寫頁面的時候碰到過乙個問題，當我們用乙個div直接包裹img，img的下方會出現3px間距，如圖
原因：img是一種類似text的標籤元素，在結束的時候，會在末尾加上乙個空白符（匿名文字），導致下方會多出來 3px 間距，其實我們在img右側新增乙個span包裹住文字，現象會更明顯
解決方法
方法一：
給div設定和img一樣的高度；
缺點：該方法不夠靈活，一旦img尺寸改變，我們要重新設定div的高度
方法二：
給img設定vertical-align為除baseline以外的值，常用
方法三：
給img新增display:block;
這個方法是我們比較常用，但需要注意，img一旦設定為塊，text-align:center；就不再生效，的水平居中應使用margin:auto;
方法四：
給img設定浮動
設定浮動會讓img脫離文件流
缺點：父元素高度不會被img自動撐開
方法五：
給div設定font-size:0;
缺點：該方法會使div中的文字消失
根據實際情況選擇合適的方法；讓我的女神更完美！
img標籤下多餘空白BUG解決方法
在進行頁面的div css排版時，遇到ie6 當然有時firefox下也會偶遇 瀏覽器中的元素img下出現多餘空白的問題絕對是常見的 對於該問題的解決方法也是 見機行事 1 將轉換為塊級物件 即，設定img為 display block 在本例中新增一組css sub img 2 設定的垂直對齊方式...
為什麼標籤下面有空白
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 對比一下 vertical align 的另外兩個常見值，top 和 bottom 可以看...
解決img標籤間距問題
關於img標籤間距問題 多個img之間有間距，包含img標籤的div之間有間距。如下 1 doctype html 2 3 4 5 testtitle 6 7 head 8 9 10 11 12 13 div 14 15 16 17 18 div 19 20 21 22 23 div 24 body...