前端 - 关于img父容器的高度会比img的高度多几像素的问题？

问题描述

<p style='width: 500px;'><img src='https://www.haobala.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的问题，点这个