前端 - 關于img父容器的高度會比img的高度多幾像素的問題?
問題描述
<p style='width: 500px;'><img src='http://m.4tl426be.cn/wenda/imgs/1.jpg' /> </p>
在網頁上thumb的高度會比里面的img高度多出幾像素,請教下這是為啥?
問題解答
回答1:p是塊級標簽,img是行級標簽,你把img的display設置能block就好了。
回答2:這是因為瀏覽器本身對img標簽的渲染問題,img標簽本身是行內元素(主要原因)所以有一種簡單有效的解決辦法(推薦)
img { display:block;}
或者可以嘗試為父級p設置font-size:0(不推薦)也可以采用浮動(float),原因是浮動會將這個元素轉換為塊級元素當然還有為p定高并且設置overflow:hidden的解決辦法(太不優雅了,強烈不推薦)
回答3:img是行內置換元素,是行內但又自帶一些樣式,需要初始化。
img { vertical-align:top; }回答4:
基線問題,img是行內塊元素,在塊元素里默認有3px或者4px空白(其實就是和文本的基線對齊不管有沒有文本)解決:設置圖片display:block或者img { vertical-align:top; }
回答5:關鍵字 ---> 4px空白
回答6:1、浮動2、display:block
回答7:設置父元素:font-size:0
設置圖片display:block
設置圖片浮動
回答8:就一個bug img 默認有3,4像素空白
解決方法:1、給父級加高 overflow:hidden;2、需要浮動時 直接float 也可以3、display:block;
回答9:這個往深里面說,是ifc的baseline的問題,點這個
相關文章:
1. html - vue項目中用到了elementUI問題2. mysql scripts提示 /usr/bin/perl: bad interpreter3. showpassword里的this 是什么意思?代表哪個元素4. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現如下圖效果。(我的書下面的線)5. android - 用textview顯示html時如何寫imagegetter獲取網絡圖片6. 對mysql某個字段監控的功能7. css3 - css怎么實現圖片環繞的效果8. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?9. JavaScript事件10. mysql優化 - mysql EXPLAIN之后怎么看結果進行優化 ?
