解决img父元素高度多出3px

解决img父元素高度多出3px

Write By CS逍遥剑仙 我的主页: csxiaoyao.com GitHub: github.com/csxiaoyaojianxian

1 现象

  当div / a……中包含img时，父元素的高度比img图片的高度多出3px

<div>
    <img src=" ">
<div>

  结果运行之后发现，不管是在移动端还是pc端，都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因，排查css无果，又怀疑是html空格的原因，把html改成

<div><img src=" "/></div>

仍不行，排除html空格的问题

2 原因

  通过google了解到原因，img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了

3 解决方案csxiaoyao.com

（1）消除掉匿名盒子的高度，给a设置line-height:csxiaoyao.com0或font-size:0 （2）给两者vertical-align:top，让其top对齐，而不是baseline对齐 （3）【推荐】：给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题