原因：
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. 数据库（Mongodb）

    1.MongoClient()函数 In [8]: import pymongo In [9]: con = pymongo.MongoClient('localhost') #建立连接 In [10 ...

  2. 走进webpack（2）--第三方框架（类库）的引入及抽离

    在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...

  3. JVM学习九：JVM之GC算法和种类

    我们前面说到了JVM的常用的配置参数,其中就涉及了GC相关的知识,趁热打铁,我们今天就学习下GC的算法有哪些,种类又有哪些,让我们进一步的认识GC这个神奇的东西,帮助我们解决了C 一直挺头疼的内存回收 ...

  4. Struts2——第一个helloworld页面

    struts2是一个较为成熟的mvc框架,先看看怎么配置struts2并且产生helloworld页面. 首先从官网下载struts2,http://struts.apache.org/downloa ...

  5. JavaScript(第二十六天)【表单处理】

    为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面.   一．表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaS ...

  6. 使用jmeter+ant进行接口自动化测试(数据驱动)之一：设计jmeter脚本

    最近在做接口测试,因为公司有使用jmeter做接口测试的相关培训资料,所以还是先选择使用jmeter来批量管理接口,进行自动化测试.话不多说,进入正题: 1.使用csv文件保存接口测试用例,方便后期对 ...

  7. 第1次作业：我与我的IT梦

    第一部分:结缘计算机 1.1最美的风景,一直在路上 说实话以前没有想过自己将学习计算机这个专业,在大二之前,我还是教师教育学院的一名师范生,机缘巧合,赶上了学校允许师范专业的同学转到非师范专业,于是, ...

  8. NetFPGA-1G-CML Demo --- reference_router_nf1_cml

    环境 deepin 15.4 vivado 15.2 ise 14.6 前期准备 Github Wiki链接:https://github.com/NetFPGA/NetFPGA-public/wik ...

  9. Spring Boot jar包linux服务器部署

    Spring Boot 部署 一.使用命令行java -jar 常驻 nohup java -jar spring-boot-1.0-SNAPSHOT.jar > log.file 2>& ...

  10. Linux 帳號管理與 ACL 權限設定

    1. Linux 的账号与群组1.1 使用者识别: UID 与 GID1.2 使用者账号:/etc/passwd, /etc/shadow1.3 关于群组: 有效与初始群组. groups, newg ...