对于在div或ul li 中加入图片有各种空隙的小研究

其实，在正常规范代码的情况下，很少会有空隙的出现。但是即使你初始化了margin和padding，在div中加了一个图片，下面还会有那么3~5px的空隙，这是为什么？



首先，这种情况时，你没有规定div的高度height（如果你加了的高度和图片高度一致，就不用往下看了。。。。），那么浏览器就会自己算出高度，并出现了这个空隙。。

这就关系到baseline的问题了，不过这个问题我也有点蒙，等以后彻底明白了再更新，说一下各种解决方法：

1：vertical-align: bottom为img设置这个，vertical-align 属性设置元素的垂直对齐方式。

2：有一种原因，是空格回车等text造成的，解决方法：回车空格不过就是个字符，只不过我们看不见，那么把font-size设置为0，就ok了。



推荐方法2，这个方法还可以解决li display：inline后，有空隙的问题。

总之，遇到有了不该出现的空隙，就想想是不是有了看不见的空格，加font-size：0；试试~~~~

欢迎评论交流。