a标签内放置img时,a比img高的问题

a标签70px


img标签放在了a标签(inline模型)内部,由于inline不是用来包含内容的,因此这需要将a标签display改为inline-block或者block

img标签60px

但是仅仅改变display并不能解决问题,因为img在a中垂直对齐方式也就是vertical-align默认值为baseline,所以img最垂直对齐时是按照a的基线对齐而不是底线

该问题产生的关键就是垂直对齐方式,基线与底线间存在空白,如何消除空白

解决办法

1.a{ display:inline-block或者block; line-height:0px或者font-size:0; }

注:line-height的值默认是按照font-size的值乘以一定比例计算得来

line-height设置为0时,基线与底线间距离为0,空白消除

2.img{ vertical-align:bottom }

对齐方式设为底线,而不以基线对齐,也消除了空白

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,268评论 1 92
  • 前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和verti...
    秦至阅读 2,019评论 0 1
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 5,261评论 8 34
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,791评论 0 6
  • 有时候去一个地方,越是热闹便越是寂寞。越能自主便越是陪衬。
    入海阅读 223评论 0 0

友情链接更多精彩内容