div里嵌套了img底部會(huì)有白塊

因?yàn)閕mg默認(rèn)是按基線(baseline)對(duì)齊的。對(duì)比一下圖片和右邊的p, q, y等字母，你會(huì)發(fā)現(xiàn)這三個(gè)字母的“小尾巴”和圖片下方的空白一樣高。下面這張圖中的黑線就是那條基線。

解決方案：一：vertical-align: bottom（推薦）

解決方案：二：display：block；（不推薦）

不推薦原因：因?yàn)閕mg在瀏覽器里的默認(rèn)樣式是inline,除非有特別的需要否則還是不改變盒模型為好，在這個(gè)問(wèn)題中本質(zhì)還是行內(nèi)元素的縱向?qū)R問(wèn)題，可以給img調(diào)整vertical-align來(lái)解決，本題中用bottom就行了

擴(kuò)展：什么是基線？

基線就是我們小時(shí)候用的英語(yǔ)本中，中間的第三條線就是基線；

第一條線是：上升高度（帽高度）

第二條線是：中值高度

第四條線是：下降高度

解讀：ascent 上升 ? mean line 平均線 ?descent 下降

html img 圖片上方產(chǎn)生1像素px間隙解決

方案一：通過(guò)css對(duì)圖片加一個(gè)浮動(dòng)元素，比如.divcss5 img{ float：left}

方案二：將圖片高度處理為單數(shù)（1、3、5、7單數(shù)），比如圖片本身為200px高度，為了解決我們將圖片PS處理成201px或199px高度。圖片本身高度為202px雙數(shù)在IE6和IE7瀏覽器中就會(huì)在圖片上方產(chǎn)生多1px的空白距離。所以制作圖片切圖時(shí)候，讓圖片高度為單數(shù)（奇數(shù)）即可解決。?

?

轉(zhuǎn)載于:https://www.cnblogs.com/qinmengjiao123-123/p/5436468.html

總結(jié)

以上是生活随笔為你收集整理的div里嵌套了img底部会有白块问题和图片一像素问题解决的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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