css奇淫技巧--img的3px
今天在写页⾯的时候，偶然发现将⼀个img放⼊div中，底部会多出来差不多3px（chrome浏览器调试）。⼀开始以为只是简单的边距问题，但是后来怎么也解决不了，⽆奈百度之，才发现这是⼀个很普遍的\"bug\"
原因
img是⼀种类似text的标签元素，在结束的时候，会在末尾加上⼀个空⽩符（匿名⽂本），这个⽂本外有⼀个匿名⾏级盒⼦，它默认的vertical-align是baseline的，⽽且往往因为上⽂line-height的影响，使它有个line-height，从⽽使其有了⾼度，因为baseline对齐的原因，这个匿名盒⼦就会下沉，往下撑开⼀些距离，所以把a撑⾼
解决⽅法
1. 消除掉匿名盒⼦的⾼度，给a设置line-height:0或font-size:0
2. 给两者vertical-align:top，让其top对齐，⽽不是baseline对齐
3. 【推荐】：给img以display:block，让它和匿名⾏级盒⼦不在⼀个布局上下⽂中，也就不存在⾏级盒的对齐问题
