<a> 包裹 <img> 产生 4px 间隙
http://zjy.name/lab/ife/t1/index.html
上面页面中右上角的 GitHub 图标下方存在 4px 的间隙，通过 Development Tool 可以看到是由于 a 标签比 img 标签高出 4px 产生的（img 34px a 38px），已经知道这个问题可以通过 line-height:0 来解决，但自己写 demo 想要复现这个问题的时候却怎么也出不来：
http://zjy.name/lab/ife/t1/4px-demo.html
求大神详解其中奥妙。
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
1、关于不能重现的问题
是因为你的例子页面中没有添加 ，如果加了这个，也会发现有空隙的。关于 可以参考 http://angrycoder.iteye.com/blog/17575392、间隔的问题
图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。2019-07-17 19:17:51赞同 展开评论
相关问答