原因：
图片文字等inline元素默认是和父级元素的baseline对齐的，即：vertical-align 的默认值是 baseline；而baseline又和父级底边bottom有一定距离；
img出现的空白就是baseline和bottom之间的这段距离；即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。
img 标签 是inline 元素， inline元素默认是baseline对齐的。 当baseline对齐的时候，baseline和bottom之间有段距离，就是出现的空白；
所以直接设置 vertical-align的值都可以避免这种情况出现。
top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。
如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。
CSS3圆形图片鼠标经过旋转效果，图片上有简短标题和说明，兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、在head区域引入样式表文件lrtk.css 2、在你的网页中加入注释区域代码即可 3、图片为方形，宽高在220像素以上，并有一定空白边距效果较好。
70
解决方法：
一：设置vertical-align；
img{
vertical-align : bottom; // top, middle
}
只要vertical-align的值是以上三个中任意的一个，就能解决缝隙的问题。
二：定义img的父容器的字体大小为0；
.main{ font-size : 0; }
三：把图片设置为块级元素；
img{
display : block;
}
参考：：
http://www.xiabingbao.com/css/2015/10/12/css-img-block
https://segmentfault.com/q/1010000000694663
https://www.zhihu.com/question/21558138
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
776
收藏
取消收藏
