<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
求大神详解其中奥妙。

阅读 4.4k
评论
    3 个回答
    • 2.9k

    1、关于不能重现的问题
    是因为你的例子页面中没有添加 <!DOCTYPE html>,如果加了这个,也会发现有空隙的。关于 <!DOCTYPE html> 可以参考 http://angrycoder.iteye.com/blog/1757539

    2、间隔的问题
    图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

        这个问题很明显是由于换行或空白符造成的,不信你给a标签加一个font-size:0px试试!
        html 中的换行或空白符会占用一定空间,具体大小因浏览器而异。
        解决方案可以参见:去除inline-block元素间间距的N种方法

          撰写回答

          登录后参与交流、获取后续更新提醒