可能因為圖片默認是內聯(lián)（行級）元素，瀏覽器默認的一些樣式行為吧？推薦在前端開發(fā)時使用一些類似于 normalize.css 的庫重置一下瀏覽器的樣式，讓所有瀏覽器更統(tǒng)一。

把圖片的 display 設為 block 即可解決這個問題。

如果把 div 高度設為圖片高度，盡管那個匿名 line box 的底部仍然在那里，但是被溢出掉了。

之前的回答比較草率不嚴謹，修改了，對不起，_CRY的答案才是正確的

類似問題: https://segmentfault.com/q/10...

圖片默認是行內替換元素，并且 vertical-align 為 baseline，也就是說它的底部只對齊到 div 的塊盒子 (block box) 里面創(chuàng)建的匿名行盒子 (line box) 的 baseline, 而這個位置和整個 div 的底部，也就是由前文中的匿名 line box—它恰好是這個 div 的最后一個 line box—的底部所決定的位置，是有一定空隙的。這一空隙就是問題中白色空白區(qū)域的來源。

總結

以上是生活随笔為你收集整理的html盒子问题，内容撑起盒子高度，却导致了盒子最下面空白的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。