li里放一个img会出现多出3像素是怎么回事

Question

好久没写css了，今天写了下发现li里放一个img然后固定img宽高，li设置背景色，会出现li比img多3像素在底部，这是什么问题引起的？
设置了padding和margin都没用

Answer 1

{
    line-height: 0;
    font-size: 0;
}

参考资料：
盒子含图片-高度多出几个像素的问题
Line-Height深入理解

Answer 2

这个问题 好多人问了， 很容易搜到。。 img默认 inline， li 标签之间的空隙会占据一定的空间
1： li{font-size:0}
2: img{display:block}
3: <li><img /></li><li></li>
</li><li>标签挨着，不留空隙

Answer 3

-WebKit-box-sizing:border-box

Answer 4

给img加上这句代码img{vertical-align:top;}

Answer 5

img { display: block; }

Answer 6

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

Answer 7

这个问题是由于基线对齐原因造成的。设置img的vertical-align为top,bottom，就可以解决这个问题了。