图片底部空白间隙解决办法
在开发时我们会遇到如下情况
可以看到图片底部有空白间隙 而我们的代码也很简单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
div{
width:100%;
border:1px solid red
}
</style>
</head>
<body>
<div>
<img src="https://i0.hdslb.com/bfs/archive/34125815b0a9de4f8c5fa6bc3dfed0a1b68f0145.jpg@336w_190h.webp" >
</div>
</body>
</html>这是因为 vertical-align属性 的原因 默认情况下图片会居于文字基线对齐，所以底部会留空，我们只需指定图片不居于文字基线对齐即可
img{
vertical-align: bottom;
}
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-08-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
