文章详情页
前端 - 关于img父容器的高度会比img的高度多几像素的问题？
浏览：241日期：2024-05-19 08:53:38
问题描述
<p style='width: 500px;'><img src='https://www.haobala.com/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. html5 - vue-cli 装好了 新建项目的好了，找不到项目是怎么回事？2. javascript - jQuery post()方法，里面的请求串可以转换为GBK编码么？可以的话怎样转换？3. javascript - 一排三个框，各个框的间距是15px,距离外面的白框间距也是15px，这个css怎么写？4. django - python 2层文件夹导入5. javascript - vue 手机端项目在进入主页后 在进入子页面，直接按返回出现空白情况6. javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么7. css - ul ol前边的标记如何调整样式呢8. python - 用urllib抓取网页上的下载链接，目标文件是xls形式，但发现抓下来的xls是空表，里面只有一句报错信息，求帮助。9. python3.x - python 中的maketrans在utf-8文件中该怎么使用10. mysql - C#连接数据库时一直这一句出问题int i = cmd.ExecuteNonQuery();
排行榜
网公网安备