問題描述

<p style='width: 500px;'><img src='http://m.baoyu77737.com/wenda/imgs/1.jpg' /> </p>

在網(wǎng)頁上thumb的高度會(huì)比里面的img高度多出幾像素，請(qǐng)教下這是為啥？

問題解答

p是塊級(jí)標(biāo)簽，img是行級(jí)標(biāo)簽，你把img的display設(shè)置能block就好了。

這是因?yàn)闉g覽器本身對(duì)img標(biāo)簽的渲染問題,img標(biāo)簽本身是行內(nèi)元素(主要原因)所以有一種簡(jiǎn)單有效的解決辦法(推薦)

img { display:block;}

或者可以嘗試為父級(jí)p設(shè)置font-size:0(不推薦)也可以采用浮動(dòng)(float),原因是浮動(dòng)會(huì)將這個(gè)元素轉(zhuǎn)換為塊級(jí)元素當(dāng)然還有為p定高并且設(shè)置overflow:hidden的解決辦法(太不優(yōu)雅了，強(qiáng)烈不推薦)

img是行內(nèi)置換元素，是行內(nèi)但又自帶一些樣式，需要初始化。

img { vertical-align:top; }回答4：

基線問題，img是行內(nèi)塊元素，在塊元素里默認(rèn)有3px或者4px空白（其實(shí)就是和文本的基線對(duì)齊不管有沒有文本）解決：設(shè)置圖片display:block或者img { vertical-align:top; }

關(guān)鍵字 ---> 4px空白

1、浮動(dòng)2、display：block

設(shè)置父元素：font-size:0

設(shè)置圖片display:block

設(shè)置圖片浮動(dòng)

就一個(gè)bug img 默認(rèn)有3，4像素空白

解決方法：1、給父級(jí)加高 overflow:hidden;2、需要浮動(dòng)時(shí) 直接float 也可以3、display：block;

這個(gè)往深里面說，是ifc的baseline的問題，點(diǎn)這個(gè)