前端 - 關(guān)于img父容器的高度會(huì)比img的高度多幾像素的問(wèn)題?
問(wèn)題描述
<p style='width: 500px;'><img src='http://www.b3g6.com/wenda/imgs/1.jpg' /> </p>
在網(wǎng)頁(yè)上thumb的高度會(huì)比里面的img高度多出幾像素,請(qǐng)教下這是為啥?


問(wèn)題解答
回答1:p是塊級(jí)標(biāo)簽,img是行級(jí)標(biāo)簽,你把img的display設(shè)置能block就好了。
回答2:這是因?yàn)闉g覽器本身對(duì)img標(biāo)簽的渲染問(wèn)題,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)烈不推薦)
回答3:img是行內(nèi)置換元素,是行內(nèi)但又自帶一些樣式,需要初始化。
img { vertical-align:top; }回答4:
基線問(wèn)題,img是行內(nèi)塊元素,在塊元素里默認(rèn)有3px或者4px空白(其實(shí)就是和文本的基線對(duì)齊不管有沒(méi)有文本)解決:設(shè)置圖片display:block或者img { vertical-align:top; }
回答5:關(guān)鍵字 ---> 4px空白
回答6:1、浮動(dòng)2、display:block
回答7:設(shè)置父元素:font-size:0
設(shè)置圖片display:block
設(shè)置圖片浮動(dòng)
回答8:就一個(gè)bug img 默認(rèn)有3,4像素空白
解決方法:1、給父級(jí)加高 overflow:hidden;2、需要浮動(dòng)時(shí) 直接float 也可以3、display:block;
回答9:這個(gè)往深里面說(shuō),是ifc的baseline的問(wèn)題,點(diǎn)這個(gè)
相關(guān)文章:
1. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????2. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問(wèn)題 麻煩幫我看一下3. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問(wèn)題。4. docker gitlab 如何git clone?5. debian - docker依賴的aufs-tools源碼哪里可以找到啊?6. macos - mac下docker如何設(shè)置代理7. docker網(wǎng)絡(luò)端口映射,沒(méi)有方便點(diǎn)的操作方法么?8. docker api 開(kāi)發(fā)的端口怎么獲取?9. docker start -a dockername 老是卡住,什么情況?10. docker - 如何修改運(yùn)行中容器的配置

網(wǎng)公網(wǎng)安備