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

其他解决办法也有，但这些都是从根本上解决问题

为什么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. PDA手持扫描资产标签，盘点完成后将数据上传到PC端，固定资产系统查看盘点结果

    固定资产管理系统介绍: 致力于研发条码技术.集成条码系统的专业性公司,针对客户的不同需求,提供一站式的企业条码系统解决方案:包括功能强大的软件系统.安全可靠的无线网络.坚固耐用的硬件系统.灵活易用的管 ...

  6. a 标签中加 onclick事件，根据事件中的校验情况来决定是否执行a标签的链接

    a 标签中加 onclick方法后,先执行onclick方法,在去执行a标签href下属性对应的动作,如果不想执行href属性下动作需要用false作为返回值. <a href="ht ...

  7. meta标签中的http-equiv属性使用介绍（转载）

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  8. 5.Struts.xml标签中的一些小技巧

    1.为Action属性注入值如给actions包下的test.java类中变量username赋值为"xingyun"在struts.xml中添加下面这段代码: <strut ...

  9. a 标签中调用js的几种方法 文章摘自他人

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

随机推荐

  1. nginx 调优

    般来说nginx配置文件中对优化比较有作用的为以下几项:worker_processes 8;1 nginx进程数,建议按照cpu数目来指定,一般为它的倍数.worker_cpu_affinity 0 ...

  2. [MODx] 4. getResources

    1. Create a chunk call 'white_content' for white content: <!-- Highlights --> <div class=&q ...

  3. win10.10 激活

    最近几天一直有同学来找我说,为什么用密钥或kms神龙版都无法激活win8/8.1.win10,于是我就让这些同学给我截图,结果他们激活出错的信息基本都一样,都是错误:“0XC004F074 软件授权服 ...

  4. php正则测试demo、动态函数

    <?php error_reporting (E_ALL); ini_set ('display_errors', 'on');?><meta http-equiv="Co ...

  5. 项目源码--Android高质量图片浏览器源码

      下载源码   技术要点: 1. 浏览所有格式的图片 2. 图片缓存到数据库 3. Sqlite数据库的高级应用 4. 文件夹缩图显示 5. 多点触控技术 6. 动画技术 7. 支持超高清图片 8. ...

  6. memcached client --ref

    Clients Client API's / libraries Updated Jul 14, 2012 by dorma...@rydia.net ref:https://code.google. ...

  7. Android（java）学习笔记134：Handler用法总结 和 秒表案例

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  8. 对于 NSLayoutConstraint 不执行动画的处理:

    在开发中  我们有时候需要改变某个空间的约束条件 也就是更改NSLayoutConstraint的值  (比如说我想在键盘顶部增加一个工具栏 让工具栏随着键盘的位置变化而变化  有一个动画效果)但是发 ...

  9. santoku学习笔记

    帮助文档:https://santoku-linux.com/faqs The first time you log in your username and password are “Santok ...

  10. 【思考】由安装zabbix至排障php一系列引发的思考

    [思考]由安装zabbix至排障php一系列引发的思考 linux的知识点林立众多,很有可能你在排查一个故障的时候就得用到另一门技术的知识: 由于linux本身的应用依赖的库和其它环境环环相扣,但又没 ...