<a><image/></a>时 多出来3px的问题

大地Dudy,前端工程师 / 全栈开发工程师

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,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
其他解决办法也有,但这些都是从根本上解决问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 10,472评论 8 34
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,698评论 1 92
  • 前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和verti...
    秦至阅读 5,924评论 0 1
  • 想休个长假,出去走走逛逛,让劳累的身体得到放松,让疲惫的心灵获得宁静。但想到手头一大堆焦头烂额的事情,叹叹气,对自...
    小考拉俱乐部阅读 3,345评论 0 1
  • 《邪爵》 〖缘〗 ――星辰神殿,仙气缭绕,上了年纪的檀木支柱分别开立在大殿两侧,雕...
    尘尊阅读 3,247评论 3 4

友情链接更多精彩内容