前端 - 關(guān)于img父容器的高度會比img的高度多幾像素的問題?
問題描述
<p style='width: 500px;'><img src='http://www.cgvv.com.cn/wenda/imgs/1.jpg' /> </p>
在網(wǎng)頁上thumb的高度會比里面的img高度多出幾像素,請教下這是為啥?
問題解答
回答1:p是塊級標(biāo)簽,img是行級標(biāo)簽,你把img的display設(shè)置能block就好了。
回答2:這是因為瀏覽器本身對img標(biāo)簽的渲染問題,img標(biāo)簽本身是行內(nèi)元素(主要原因)所以有一種簡單有效的解決辦法(推薦)
img { display:block;}
或者可以嘗試為父級p設(shè)置font-size:0(不推薦)也可以采用浮動(float),原因是浮動會將這個元素轉(zhuǎn)換為塊級元素當(dāng)然還有為p定高并且設(shè)置overflow:hidden的解決辦法(太不優(yōu)雅了,強烈不推薦)
回答3:img是行內(nèi)置換元素,是行內(nèi)但又自帶一些樣式,需要初始化。
img { vertical-align:top; }回答4:
基線問題,img是行內(nèi)塊元素,在塊元素里默認(rèn)有3px或者4px空白(其實就是和文本的基線對齊不管有沒有文本)解決:設(shè)置圖片display:block或者img { vertical-align:top; }
回答5:關(guān)鍵字 ---> 4px空白
回答6:1、浮動2、display:block
回答7:設(shè)置父元素:font-size:0
設(shè)置圖片display:block
設(shè)置圖片浮動
回答8:就一個bug img 默認(rèn)有3,4像素空白
解決方法:1、給父級加高 overflow:hidden;2、需要浮動時 直接float 也可以3、display:block;
回答9:這個往深里面說,是ifc的baseline的問題,點這個
相關(guān)文章:
1. 在mac下出現(xiàn)了兩個docker環(huán)境2. css3 - css怎么實現(xiàn)圖片環(huán)繞的效果3. android - 用textview顯示html時如何寫imagegetter獲取網(wǎng)絡(luò)圖片4. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?5. css - 定位為absolute的父元素中的子元素 如何設(shè)置在父元素的下面?6. JavaScript事件7. javascript - jquery hide()方法無效8. 網(wǎng)頁爬蟲 - 用Python3的requests庫模擬登陸B(tài)ilibili總是提示驗證碼錯誤怎么辦?9. 注冊賬戶文字不能左右分離10. html - vue項目中用到了elementUI問題
