问题:a标签里面包含img标签,出现a标签的高度高于img标签好几个px

解决:

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,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题

作者:大地Dudy
链接:https://www.zhihu.com/question/26821863/answer/65552730
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

最新文章

  1. Nginx 正向代理
  2. win7如何恢复以前的ie版本
  3. webkit中获取用户选择文本和编程设定选择文本
  4. Shell命令_if
  5. poj 1700
  6. MySQL在windows系统中修改datadir路径后无法启动问题,报错1067
  7. 各种U启网启什么的都是浮云
  8. python 3.3.2 爬虫记录
  9. linux下获得块设备大小
  10. 《sort帮你排序》-linux命令五分钟系列之二十六
  11. 支付宝打造公共账号业务网关, RSA密钥对生成
  12. Linux shell-grep
  13. java泛型探索——小特性
  14. CI框架使用PHPmailer发送邮件找回密码
  15. C# winform TreeView中关于checkbox选择的完美类[转]
  16. web中静态资源和动态资源的概念及区别
  17. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 1: ordinal not in range(128)
  18. Delphi中的动态包,有详细建立包的步骤(答案很简单:因为包的功能强大)
  19. Go 导入当前项目下的包
  20. UESTC--1468

热门文章

  1. <转>巧用notepad++ 批量转换ansi 和 utf8
  2. mongoDB 高级查询之取模查询$mod
  3. 工作总结 Ajax.BeginForm 默认action
  4. 一个文件查看你选择 Run as Android applications 都干了啥
  5. Cocos2d-x 3.x版2048游戏开发
  6. Hyperlynx仿真学习
  7. URAL 1750 Pakhom and the Gully 计算几何+floyd
  8. 知也atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31无涯 - I
  9. Kafka具体解释五、Kafka Consumer的底层API- SimpleConsumer
  10. Spring MVC3.0.5搭建全程