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
链接:http://www.zhihu.com/question/26821863/answer/65552730
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

img标签有时候会出现下方无缘无故多出像素的BUG

  1. 解决方法1:

    设置 img 的 vertical-align: bottom;

    ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ vertical-align:bottom; }

  2. 2

    解决方法2:

    设置 img 的 margin-bottom: -5px;

    ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ margin-bottom: -5px; }

  3. 3

    解决方法3

    设置 ul 的 font-size:0;

    ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; }

  4. 4

    解决方法4

    使li浮动,并设置img为块级元素

    ul{ width: 280px; } ul li{ float:left; display:block; height:57px; width:277px; } img{ display: block; }

a标签中使用img后的高度多了几个像素的更多相关文章

  1. 为什么a标签中使用img后的高度多了几个像素?

    a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其 ...

  2. a标签中使用img后的高度多了4px

    前两天,在做一个网站的时候,发现a标签中使用img后的高度多了4px,各种纠结. 最后,仔细分析,终于找到原因了,因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下 ...

  3. 为什么a标签中使用img后,高度多了几个像素?

    <li><a href="#"><img src="images/audio.jpg" alt="">& ...

  4. 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法

    一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...

  5. HTML 的超链接 a 标签中如何设置其宽度和高度?

    HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...

  6. HTML Meta标签中的viewport属性含义及设置

    两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...

  7. IE 下a标签在 position:absolute 后无法点击的问题

    IE 下 a 标签在 position:absolute 后无法点击的问题 条件 : DOCTYPE 为 XHTML. IE 浏览器 现象 : 将 a 的 position 指定为 absolute, ...

  8. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  9. 前端 -----02 body标签中相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

随机推荐

  1. 敏捷开发(十)- Scrum每日例会

    本文主要是为了检测你对SCRUM 评估会议的了解和使用程度, 通过本文你可以检测一下     1.你们的SCRUM 没人例会的过程和步骤    2.SCRUM 每日例会的输出结果一.会议目的      ...

  2. C# lock关键词/lock语句块、线程锁

    一.lock关键词说明 1. lock 关键字将语句块标记为临界区,方法是获取给定对象的互斥锁,执行语句,然后释放该锁. 2. lock 语句块锁定,功能等同于 Monitor.Enter(obj): ...

  3. Spring Security(15)——权限鉴定结构

    目录 1.1      权限 1.2      调用前的处理 1.2.1     AccessDecisionManager 1.2.2     基于投票的AccessDecisionManager实 ...

  4. vector,list,deque

    stl提供了三个最基本的容器:vector,list,deque. vector和built-in数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此它能非常好的支持随即存取,即[]操作符,但由 ...

  5. foreach绑定

    目的 foreach可以将一个数组中的实体循环的进行绑定.这在将一个list显示成table时非常有用. 假设数组是observable的,当在绑定后做了add, remove,或者重新排序后,绑定会 ...

  6. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  7. 主机无法访问虚拟机的httpd服务

    症状:虚拟机装的centos6.3 通过桥接的方式与主机连接 虚拟机通过yum安装httpd服务 在主机浏览器中输入 虚拟机ip  无法访问虚拟机Apache 虚拟机和主机可以相互ping通 解决:关 ...

  8. Java源程序结构

    完整的java源程序应该包括下列部分: 1.package语句 l java编译器为每个类生成一个字节码文件,且文件名与类名相同,这就会带来一个问题:同名的类会发生冲突. l 所以package的两个 ...

  9. bootstrap页面模板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. (repost)在ARM Linux内核中增加一个新的系统调用

    实验平台内核版本为4.0-rc1,增加一仅仅打印Hello World的syscall,最后我们在用户空间swi验证 实验平台内核版本为4.0-rc1,增加的系统调用仅仅是简单打印一个Hello Wo ...