前端 - 關于img父容器的高度會比img的高度多幾像素的問題？

問題描述

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

在網頁上thumb的高度會比里面的img高度多出幾像素，請教下這是為啥？

問題解答

p是塊級標簽，img是行級標簽，你把img的display設置能block就好了。

這是因為瀏覽器本身對img標簽的渲染問題,img標簽本身是行內元素(主要原因)所以有一種簡單有效的解決辦法(推薦)

img { display:block;}

或者可以嘗試為父級p設置font-size:0(不推薦)也可以采用浮動(float),原因是浮動會將這個元素轉換為塊級元素當然還有為p定高并且設置overflow:hidden的解決辦法(太不優雅了，強烈不推薦)

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

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

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

關鍵字 ---> 4px空白

1、浮動2、display：block

設置父元素：font-size:0

設置圖片display:block

設置圖片浮動

就一個bug img 默認有3，4像素空白

解決方法：1、給父級加高 overflow:hidden;2、需要浮動時 直接float 也可以3、display：block;

這個往深里面說，是ifc的baseline的問題，點這個