原因：
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. 大数据 --> Kafka集群搭建

    Kafka集群搭建 下面是以三台机器搭建为例,(扩展到4台以上一样,修改下配置文件即可) 1.下载kafka http://apache.fayea.com/kafka/0.9.0.1/ ,拷贝到三台 ...

  2. sql模糊查询效率

    在数据库量比较大的时候通常有一些查询,例如查询文本类型的数据,存储量大,用like进行模糊查询效率实在太低 select * from stdcontent where  content like ' ...

  3. C#，DataHelper，一个通用的帮助类，留个备份。

    using System; using Newtonsoft.Json; using System.IO; using System.Text; namespace CarHailing.Base { ...

  4. 数据库（Oracle）运维工作内容及常用脚本命令

    1.系统资源状况:--内存及CPU资源  --linux,solaris,aix    vmstat 5  --说明:    1)观察空闲内存的数量多少,以及空闲内存量是否稳定,如果不稳定就得想办法来 ...

  5. 03-第一个脚本程序以及输入输出_Python编程之路

    上节课已经教大家安装了Python的解释器,那么这节课我们就可以正式来写代码了 说明:在下面的代码演示中,我将大部分使用python交互器演示代码的输入输出,注意">>>& ...

  6. 论文阅读——Visual inertial odometry using coupled nonlinear optimization

    简介:论文提出一种新的视觉里程计算法,其直接利用带噪声的IMU数据和视觉特征位置来优化相机位姿.不同于对IMU和视觉数据运行分离的滤波器,这种算法将它们纳入联合的非线性优化框架中.视觉特征的透视重投影 ...

  7. JDK1.8源码(六)——java.util.LinkedList 类

    上一篇博客我们介绍了List集合的一种典型实现 ArrayList,我们知道 ArrayList 是由数组构成的,本篇博客我们介绍 List 集合的另一种典型实现 LinkedList,这是一个有链表 ...

  8. 极其简单的帮你理解ORM中的关联关系

    ORM对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转 ...

  9. Python实现网站模拟登陆

    一.实验简介 1.1 基本介绍 本实验中我们将通过分析登陆流程并使用 Python 实现模拟登陆到一个实验提供的网站,在实验过程中将学习并实践 Python 的网络编程,Python 实现模拟登陆的方 ...

  10. 【iOS】swift-Binary operator '|' cannot be applied to two UIViewAutoresizing operands

    let view = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 568)) addSubview(view) view.autoresi ...