因為img默認是按基線(baseline)對齊的。對比一下圖片和右邊的p, q, y等字母，你會發現這三個字母的“小尾巴”和圖片下方的空白一樣高。下面這張圖中的黑線就是那條基線。

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

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

不推薦原因：因為img在瀏覽器里的默認樣式是inline,除非有特別的需要否則還是不改變盒模型為好，在這個問題中本質還是行內元素的縱向對齊問題，可以給img調整vertical-align來解決，本題中用bottom就行了

擴展：什么是基線？

基線就是我們小時候用的英語本中，中間的第三條線就是基線；

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

第二條線是：中值高度

第四條線是：下降高度

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

html img 圖片上方產生1像素px間隙解決

方案一：通過css對圖片加一個浮動元素，比如.divcss5 img{ float：left}

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com