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

前端之旅HTML与CSS篇之a便签中放入其他块元素会撑大高度的原因的更多相关文章

  1. 前端之旅HTML与CSS篇之IE6常见BUG

    1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin ...

  2. 前端之旅HTML与CSS篇之block与inline的区别

    display:block;和display:inline;的区别block元素特点: 1)处于常规流中时,如果width没有设置,会自动填充满父容器 2)可以应用margin/padding 3)在 ...

  3. 前端之旅HTML与CSS篇之清除浮动塌陷

    以下内容为转载. 方法1:给浮动的元素的上级添加高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以 ...

  4. 前端之旅HTML与CSS篇之自己总结的关于居中的方法

    1.text-align:center  :在父容器里水平居中 inline 文字,或 inline 元素 2.line-height  与 height 相等时,垂直居中文字(文字垂直水平居中,同时 ...

  5. (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

  6. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  7. BAT及各大互联网公司前端笔试面试题--Html,Css篇

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...

  8. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇（昨天有个群友表示写的简单了点，然后我无情的把他的抄了一遍）

    某个群友 http://www.cnblogs.com/coco1s/   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础 ...

  9. 各大互联网公司2014前端笔试面试题–HTML,CSS篇

    Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...

随机推荐

  1. 凡事预则立（Beta）

    听说--凡事预则立 吸取之前alpha冲刺的经验教训,也为了这次的beta冲刺可以更好更顺利地进行,更是为了迎接我们的新成员玮诗.我们开了一次组内会议,进行beta冲刺的规划. 上一张我们的合照: 具 ...

  2. bug终结者 团队作业第一周

    bug终结者 团队作业第一周 小组组员及人员分工 小组成员 组长: 20162323 周楠 组员: 20162302 杨京典 20162322 朱娅霖 20162327 王旌含 20162328 蔡文 ...

  3. js计时功能

    //个位秒加 function time4jia() { //分钟60为上限 所有加停止 if (sz(a('time1').innerHTML) == 6) { return; } var m4 = ...

  4. 项目Beta冲刺预热

    Beta准备 1. 讨论组长是否重选的议题和结论. 经过讨论,我们认为,经过一段时间的磨合,现任组长是不需要更换的. 2. 下一阶段需要改进完善的功能. 增加关于征信的功能,贴近选题主题 美化界面,尽 ...

  5. 局域网下访问其他计算机搭建的django网页

    1.修改工程目录下的setting.py 文件 ALLOWED_HOSTS = ['*'] #*表示允许访问的ip 如果是添加* 则允许所有同局域网环境的主机访问 2.在完成的django工程下运行以 ...

  6. http post/get 2种使用方式

     public class HttpUtil { //HttpPost public static String executePost(String url, List<NameValue ...

  7. （干货）微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  8. 新概念英语（1-63）Thank you, doctor.

    新概念英语(1-63)Thank you, doctor. Who else is in bed today? why? A:How's Jimmy today? B:Better. Thank yo ...

  9. C# JavaScriptSerializer找不到引用

    遇到一个问题,还是第一次遇到,虽然比较简单,还是记录一下 一.写了一个小工具,为了方便就建了个Form窗体,结果用到了JavaScriptSerializer类,可是怎么都找不到System.Web. ...

  10. linux下mongodb安装、服务器、客户端、备份、账户命令

    在linux环境安装mongoDB: 一般认为偶数版本为稳定版 如 1.6.x,奇数版本为开发版如1.7.x 32bit的mongoDB最大能存放2g的数据,64bit没有限制 方法1: 终端执行: ...