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

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

高洛峰 2017-04-17 15:03:26

[HTML讨论组]

773

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

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

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(9)

迷茫2017-04-17 15:05:26 9楼

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

赞 +0

添加回复

天蓬老师2017-04-17 15:05:26 8楼

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

img {
    display:block;
}

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

赞 +0

添加回复

ringa_lee2017-04-17 15:05:26 7楼

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

img {
  vertical-align:top;  
}

赞 +0

添加回复

高洛峰2017-04-17 15:05:26 6楼

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

赞 +0

添加回复

伊谢尔伦2017-04-17 15:05:26 5楼

关键字 ---> 4px空白

赞 +0

添加回复

巴扎黑2017-04-17 15:05:26 4楼

1、浮动
2、display：block

赞 +0

添加回复

PHP中文网2017-04-17 15:05:26 3楼

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

赞 +0

添加回复

怪我咯2017-04-17 15:05:26 2楼

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

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

赞 +0

添加回复

ringa_lee2017-04-17 15:05:26 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>