今天在写页面时,发现在a标签,里面嵌入<img>底部会出现空白的问题!

请看示例代码:

 <a style="border: 2px dashed blue">
<img src="data:images/module/zright2.jpg" alt="图片">
</a>

请看示例效果图:

现在出现了两个问题,首先a标签,没有因为img的大小而被撑大,然后是a的内部下面出现空白。

1、首先,<a>标签是inline的,框模型是:行内框。行内框没有包含图片的表现,<img>的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样,就应该使用块级框:比如:
display:block;
/*或者*/
display:inline-block;
关于框模型!推荐你去看看css的官方http://www.w3.org/TR/CSS2/或者网上很多文章都有!

2、<img>标签为什么会有底下的空白呢?这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧!http://www.zhihu.com/question/21558138讲得很周到!

3、总结这个问题的几种解法:
A、处理基线
a{display:block;}
img{vertical-align:bottom;}
 
B、强行去掉<a>标签的行高
a{display:block;line-height:0px;}
 
C、没有设置行高的时候可以去掉字体大小
a{display:block;font-size:0px;}

文章乃参考、转载其他博客所得,仅供自己学习作笔记使用!!!

<a>标签里面直接嵌套图片,<img>下面出现一小段空白的原因的更多相关文章

  1. <a>标签里面嵌图片<img>下面出现一小段空白的原因

    今天做项目的时候,发现在a标签,里面嵌入<img>会出现空白 css 内容: a{ border:1px solid black; } img{ width:200px; } html内容 ...

  2. 织梦dedecms中arclist标签下无法嵌套图片

    版权声明:本文为博主原创文章,未经博主允许不得转载. 错误代码: {dede:arclist row=10 orderby=click titlelen=35} [field:title/] {/de ...

  3. td里面嵌套img标签后如何消除图片间隔

      td里面嵌套image标签后如何消除图片间隔 CreateTime--2018年3月7日16:18:12 Author:Marydon 情景还原: <body> <div sty ...

  4. Android TextView 嵌套图片及其点击,TextView 部分文字点击,文字多颜色

    1. TextView 中嵌套图片的方法 TextView textView... textView.setText("..."); textView.append(Html.fr ...

  5. 正则匹配闭合HTML标签(支持嵌套)

    任何复杂的正则表达式都是由简单的子表达式组成的,要想写出复杂的正则来,一方面需要有化繁为简的功底,另外一方面,我们需要从正则引擎的角度去思考问题.关于正则引擎的原理,推荐<Mastering R ...

  6. php正则获取html图片标签信息(采集图片)

    php获取html图片标签信息(采集图片),实现图片采集及其他功能,带代码如下: <?php $str="<img src='./a.jpg'/>111111<img ...

  7. mp3 音频 音乐 tag ID3 ID3V1 ID3V2 标签 读取信息 获得图片 jpeg bmp 图片转换等

    mp3 音频 音乐 tag ID3 ID3V1 ID3V2 标签 读取信息 获得图片 jpeg bmp 图片转换(上) MP3文件格式(二)---ID3v2 图:ID3V1标签结构 图:ID3V2标签 ...

  8. html img标签显示一个默认图片

    1. [代码]img标签src对应的图片不存在,显示一个默认的图片 <img src="abc.JPG" onerror="this.src='default.JP ...

  9. 在 Web 开发中,img 标签用来呈现图片,而且一般来说,浏览器是会对这些图片进行缓存的。

    在 Web 开发中,img 标签用来呈现图片,而且一般来说,浏览器是会对这些图片进行缓存的. 比如访问百度,我们可以发现,图片.脚本这种都是从缓存(内存缓存/磁盘缓存)中加载的,而不是再去访问一次百度 ...

随机推荐

  1. ZZ 使用Jenkins配置Git+Maven的自动化构建

    http://blog.csdn.net/xlgen157387/article/details/50353317 Jenkins是帮我们将代码进行统一的编译打包.还可以放到tomcat容器中进行发布 ...

  2. Mybatis中输入输出映射和动态Sql

    一.输入映射 我们通过配置parameterType的值来指定输入参数的类型,这些类型可以是简单数据类型.POJO.HashMap等数据类型 1.简单类型 2.POJO包装类型 ①这是单表查询的时候传 ...

  3. Java 实现删除文件工具类

    工具代码 package com.wangbo; import java.io.File; /** * 删除目录或文件工具类 * @author wangbo * @date 2017-04-11 1 ...

  4. JavaScript基础-第2章

    目标 常用数据类型 基本语法 变量的定义与赋值 数据类型与转换 逻辑控制语句 条件语句 循环语句 函数定义 基本语法 变量 变量名以字母或下划线("_")开头 变量可以包含数字.从 ...

  5. [CocoaPods]故障排除

    安装CocoaPods 如果您在macOS 10.9.0-10.9.2上安装,当RubyGems尝试安装jsongem 时可能会遇到问题.要解决此问题,请遵循以下说明 从macOS 10.8升级到10 ...

  6. 【金三银四跳槽季】Java工程师如何在1个月内做好面试准备?

    目录 一.写在前面 二.技术广度的快速准备 三.技术深度的快速准备 四.基础功底的快速准备 五.下篇预告 一.写在前面 春节长假转眼已过,即将迎来的是一年一度的金三银四跳槽季. 假如你准备在金三银四跳 ...

  7. linux系统学习方法分享

    初学者可以自己安装虚拟机,然后把 linux 常用命令例如 cd.ls.chmod.useradd.vi 等等多练习几十遍,把自己敲打命令的熟练程度提升上来.然后根据文档搭建 Linux 下常见的各种 ...

  8. iOS-Xcode解决【workspace integrity couldn't load project'】

    出现如标题提示的项目打不开情况,多半可能是因为Xcode版本不同,或者是SVN/Git使用导致 解决办法一: 删除冲突代码,"项目文件->Pod文件夹->Pods.xcodepr ...

  9. 【xsy2332】Randomized Binary Search Tree DP+FFT

    题目大意:给你一个$[0,1]$之间等概率随机序列,你需要把这个序列插入到一棵$treap$中,问这棵$treap$的期望深度,请对于$[1,n]$中的每个深度分别输出它的概率(实数,保留五位小数). ...

  10. 2 jquery选择器

    一基本选择器 #id .class  elment  *  select1, select2, select3... 例 $("span, #two").css("bac ...