为什么a标签中使用img后的高度多了几个像素？

a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。

解决办法一：是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;

解决办法二：是给两者vertical-align:top，让其top对齐，而不是baseline对齐

解决办法三：是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题

其他解决办法也有，但这些都是从根本上解决问题

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Web 前端 a标签中使用img后的高度多了几个像素？
    1. 首先 a 是 inline 元素 a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认verti...
    EchoSpot阅读 290评论 0赞 0
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1赞 92
  • 你所不知道的vertical-align
    有些东西我们经常用，但是我们却并不了解它的原理，所以一旦换了场景，好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 5,051评论 8赞 34
  • 深入理解行内元素的布局
    前言 总括： 本文通过实例讲解CSS中最大的难点之一，行内元素的布局，主要是挖掘line-height和verti...
    秦至阅读 1,954评论 0赞 1
  • 上帝忘记送给非洲一抹绿
    如果我是雨，我要去没水的地方。 如果我是衣，我要最先走向衣衫褴褛的孩子。 上帝不是公平的，他创造了非洲，却无视非洲...
    乐颜薇薇阅读 228评论 0赞 0