div裡嵌套了img底部會有白塊
因為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的空白距離。是以制作圖檔切圖時候，讓圖檔高度為單數(奇數)即可解決。
聲明：本文原創釋出php中文網，轉載請注明出處，感謝您的尊重！如有疑問，請聯系[email protected]處理