div中img图片下方空白问题，div高度不等于img图片的高度，会留出几个像素

最新推荐文章于 2021-05-30 20:27:55 发布

love2016hy

最新推荐文章于 2021-05-30 20:27:55 发布

阅读量3.9k

点赞数 2

分类专栏： css布局文章标签： css布局

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/love2016hy/article/details/78483867

版权

在CSS布局中，div包含img图片时会出现高度不匹配，导致底部留有空白。这是因为img作为行内块元素，其vertical-align默认为baseline。通过设置img的vertical-align属性为middle、top或bottom，可以消除空白。调整line-height的值会影响div的高度。理解vertical-align和line-height的关系是解决此问题的关键。

摘要由CSDN通过智能技术生成

在div中加入img图片时会发现div的高度并不等于img图片的高度，借用一下小米的logo做了一下测试，代码简单明了，请继续往下看：

<html>
    <div class="wrap">
        <img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt="logo">
    </div>
    <br>
    <div class="wrap">
        <img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt=

最低0.47元/天解锁文章

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

love2016hy CSDN认证博客专家 CSDN认证企业博客

码龄8年

8: 原创

135万+: 周排名

45万+: 总排名

3万+: 访问

: 等级

356: 积分

3: 粉丝

4: 获赞

6: 评论

19: 收藏

私信

关注

热门文章

分类专栏

css布局 3篇
JavaScript 3篇
webpack 1篇

最新评论

ajax如何请求本地txt文件时
m0_68156236: 请问这个有什莫问题嘛？
ajax如何请求本地txt文件时
m0_68156236: [code=plain] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id ="btn">ppp</button> <script> var btn = document.getElementById("btn"); btn.addEventListener("click", function() { var xhr =new XMLHttpRequest() xhr.open("GET", "user.txt", true);//注意路径问题读取data.txt文件的内容。 xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200||xhr.status==0) {//请求本地txt文件时状态码是0。 alert(xhr.responseText); } else { alert(xhr.status); } } } }, false) </script> </body> </html> [/code] - 出现了问题 [code=javascript] Access to XMLHttpRequest at 'file:///D:/%E5%89%8D%E7%AB%AF/ja-vaScript%E9%9B%B6%E5%9F%BA%E7%A1%80%E9%80%9A%E5%85%B3%E5%BF%85%E5%A4%87%E8%B5%84%E6%96%99/ [/code]
ajax如何请求本地txt文件时
陈海明hack: ajax请求本地的txt文件
win10和ubuntu双系统卸载ubuntu方法
艾玛2018了回复煮酒老麦: 所以你们后来是怎么解决的呢？我是输入Mbrfix/drive 0 fixmbr后，先没有删除磁盘分区，想试试重启看什么效果，结果直接显示error loading operating system
win10和ubuntu双系统卸载ubuntu方法
计算机视觉_目标检测回复煮酒老麦: 我也是，大家千万别这么做

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。