div盒子使用<img>标签高出img元素解决方案
在写图片链接时，遇到的一个有趣的问题，在这里分享一下解决方法和原因。
问题重现：
css代码:
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: yellow; display: flex; justify-content: space-around; align-items: center; } div { border: 1px solid #000; overflow: hidden; } a { border: 1px solid #000; overflow: hidden; } img { height: 100px; width: 100px; } 复制代码html代码:
<div> <img src="https://raw.githubusercontent.com/fafa123hua/img-folder/master/010%E6%B0%B4%E6%BB%B4.png" /> </div> <a ><img src="https://raw.githubusercontent.com/fafa123hua/img-folder/master/010%E6%B0%B4%E6%BB%B4.png" /></a> </body> 复制代码
如图所示，当div盒子(a标签也是)的高度是由img的高度撑开时，就会出现div盒子的高会比本身img元素高出一点点的情况，出现这种情况的原因是img标签有个预设元素是vertical-align，它的值是baseline，根据产生条件和原因有以下几个解决方案。
解决方案
1 给父盒子高度
直接从源头解决给个高完事了。
div { border: 1px solid #000; overflow: hidden; height: 100px; } 复制代码2 控制文本元素
设置font-size或者line-heigth为0，让文本元素没有空间自然就没有多余位置。
div { border: 1px solid #000; overflow: hidden; line-height: 0; /* font-size: 0; */ } 复制代码3 修改元素类型
将img改为块级元素。
img { height: 100px; width: 100px; display: block; } 复制代码4 修改预设元素
修改img的预设元素vertical-align值，改为其他。
img { height: 100px; width: 100px; vertical-align: middle; }
作者：Elbert_
链接：https://juejin.cn/post/7025239227600207879