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

    <div class="thumb" style="width: 500px;">
        <img src="imgs/1.jpg" style="width: 100%;height: auto"/>
    </div>

在网页上thumb的高度会比里面的img高度多出几像素，请教下这是为啥？

html 前端 css

html5 css3

阅读 13k

14 个回答

得票最新

Emrys

1.4k4416

发布于
2017-03-17

div是块级标签，img是行级标签，你把img的display设置能block就好了。

feifei

11411324

发布于
2017-03-24

基线问题，img是行内块元素，在块元素里默认有3px或者4px空白（其实就是和文本的基线对齐不管有没有文本）
解决：设置图片display:block或者img {
vertical-align:top;
}

_gjy_

39429

发布于
2017-03-17

这是因为浏览器本身对img标签的渲染问题,img标签本身是行内元素(主要原因)
所以有一种简单有效的解决办法(推荐)

img {
    display:block;
}

或者可以尝试为父级div设置font-size:0(不推荐)
也可以采用浮动(float),原因是浮动会将这个元素转换为块级元素
当然还有为div定高并且设置overflow:hidden的解决办法(太不优雅了，强烈不推荐)

已注销

3.6k83856

发布于
2017-03-17

img是行内置换元素，是行内但又自带一些样式，需要初始化。

img {
  vertical-align:top;  
}

深蓝

11517

发布于
2017-03-23

设置父元素：font-size:0
设置图片display:block
设置图片浮动

SharkU

关键字 ---> 4px空白

1、浮动
2、display：block

就一个bug
img 默认有3，4像素空白

解决方法：
1、给父级加高 overflow:hidden;
2、需要浮动时直接float 也可以
3、display：block;

zp1996

3.2k24163

发布于
2017-03-24

这个往深里面说，是ifc的baseline的问题，点这个

yjjcode

481311

发布于
2017-05-05

img {
  vertical-align:0;  
}

彼岸花开

492764107

发布于
2017-05-06

font-size:0;

vertical-align:0;

vertical-align:top;

这三个我试试啦为什么还是不行呢？

display:block是OK的;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        div{
            width:200px;

        }
        img{
            width:100%;
            /*vertical-align: top;*/
             /*vertical-align:0;  */
            /*display:block;*/
            font-size:0;
        }
    </style>
</head>
<body>
    
    <div>
        <img src="img/1.jpg">
    </div>    
</body>
</html>