问题：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
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

a标签里面包含img标签，出现a标签的高度高于img标签好几个px的更多相关文章

  1. Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. <object> 标签用于包含对象，比如图像、音

    Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如 ...

  2. jquery判断一个标签是否包含另外一个标签

    jquery判断一个标签是否包含另外一个标签 一.总结 一句话总结: jquery的find方法配合length属性:if($("#video_md_9_1").find(&quo ...

  3. C#使用正则表达式获取HTML代码中a标签里包含指定后缀的href的值

    //C#使用正则表达式获取HTML代码中a标签里包含指定后缀的href的值,表达式如下: Regex regImg = new Regex(@"(?is)<a[^>]*?href ...

  4. iframe标签用法详解(属性、透明、自适应高度)

    1.iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1. ...

  5. iframe标签用法详解(属性、透明、自适应高度)（总结）

    <iframe src="http://www.jb51.net" width="200" height="500"> 脚本之家 ...

  6. JAVAWEB开发之JSTL标签库的使用、 自己定义EL函数、自己定义标签（带属性的、带标签体的）

    JSTL  JSTL简单介绍: JSTL的全称:JSP Standard Tag Library,JSP标准标签库 JSTL的作用:   提供给Java Web开发者一个标准通用的标签函数库   和E ...

  7. [原创]java WEB学习笔记40：简单标签概述（背景，使用一个标签，标签库的API，SimpleTag接口，创建一个自定义的标签的步骤 和简单实践）

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. JAVA POI替换EXCEL模板中自定义标签（XLSX版本）满足替换多个SHEET中自定义标签

    个人说明:为了简单实现导出数据较少的EXCEL(根据自定义书签模板) 一.替换Excel表格标签方法```/** * 替换Excel模板文件内容 * @param map * 需要替换的标签建筑队形式 ...

  9. 潭州课堂25班：Ph201805201 django框架 第五课 自定义简单标签，包含标签，模型类创建，梳理类创建 (课堂笔记)

    自定义标签同自定义过渡器一样,要创建文件,在配置文件中以APP方法注册,对方法进注册,在 html 文件中引入,.. 由模板传参 在 在配置文件中改时区: 由视图函数传参 包含标签: 当有这种重复的代 ...

随机推荐

  1. LoadRunner中对图表的分析说明

    LoadRunner中对图表的分析说明 (一)在Vusers(虚拟用户状态)中 1.Running Vusers(负载过程中的虚拟用户运行情况) 说明——系统形成负载的过程,随着时间的推移,虚拟用户数 ...

  2. TensorFlow学习笔记 速记1——tf.nn.dropout

    tf.nn.dropout(x, keep_prob, noise_shape=None, seed=None,name=None)  上面方法中常用的是前两个参数: 第一个参数 x:指输入: 第二个 ...

  3. javascript跨浏览器事件对象类库

    一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...

  4. Java(Android)解析KML文件

    參考自:http://blog.csdn.net/yyywyr/article/details/38359049 http://blog.csdn.net/warrenwyf/article/deta ...

  5. less css下载及编绎工具

    http://www.lesscss.net less.js下载 LESS 1.5已经放出Beta 1版本,支持source map等新特性,欢迎尝鲜.详细变更请见更新日志. 生产环境使用建议下载1. ...

  6. C# AppDomain 类

    /*** AppDomain 表示应用程序域,它是一个应用程序在其中执行的独立环境.无法继承此类. 应用程序域(由 AppDomain 对象表示)为执行托管代码提供隔离.卸载和安全边界. 使用应用程序 ...

  7. python模块学习之__future__

    每个程序在更新版本之后,都会相较于上一个版本有所改动.这些改动会给程序的使用者造成不小的困扰! 比如python2.xx和3.xx的改动,足够让新手们头大了! 在3中, u'xxx'和'xxx'都是字 ...

  8. C/C++知识要点4——printf函数以及cout的计算顺序

    printf函数的计算顺序:先从右到左压栈,然后从左到右出栈. 例程: #include"stdio.h" int main() { int arr[] = { 1, 2, 3, ...

  9. 不再为无限级树结构烦恼,且看此篇s

    很久都没有写点什么出来分享了,最近在做多级树的时候,发现来来回回写过很多遍,于是封装成用户控件,以方便日后重复使用. 首先上效果: 我们看到以上2种效果,都是支持任意级的,这里源码中使用的是递归,以便 ...

  10. jQuery DOM 元素方法

    函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuery 选择器匹配的元素的数量. . ...