Web前端知识

首页 > 免费 > Web前端知识 >

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

来源:北京汇仁智杰科技有限公司   时间:2016-04-20   点击:

  我想,做前端的技术人员肯定也遇到过和小编一样的问题,那就是为什么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,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题。
  以上的三种解决办法,就是今天小编和大家分享的,其他的解决办法也是有的,但是这几种是最常用的,希望对你有所帮助。

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13370157521
业务QQ:373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰