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，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题