[html] 你知道著名的3像素Bug指的是什么吗？怎么解决呢？

img标签渲染之后下方会出现几个像素（我用谷歌测试是4px, 火狐3.5px）的空白；
img是行内元素，默认display：inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是贴紧容器下边缘，所以会有几像素的空白；
解决办法：

    把img设置为display: block;
    给img和其父元素都设置vertical-align: top；让其top对齐而不是baseline对齐；
    给img父元素设置line-height: 0;

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题