最近在做项目突然发现用了img后有个空白区,如下图:

真的很影响美观,那么是什么原因造成的呢?

右键查看元素查看上下文的margin和padding也没有找到这个空白的来源.

只好上网看看别人是怎么说的:

---------------------------------------------------------------------------这里是分割线--------------------------------------------------------------------------------------------

作者:尤雨溪
链接:https://www.zhihu.com/question/21558138/answer/18615056
来源:知乎

首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念:

可以看到,出现在baseline下面的是 p ,q , g 等这些字母下面的那个尾巴。

对比一下 vertical-align 的另外两个常见值,top 和 bottom:

可以看到,baseline 和 bottom 之间有一定的距离。实际上,inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字,只要是 inline 的图片这段空白都会存在。

那么去掉这段空白的方法有以下几种:

1. 最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话,那应该是用 bottom 或是 middle 比较好。

2.top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了。

3.如果没有设置 line-height,line-height 的默认值是基于 font-size 的,视渲染引擎有所不同,但一般是乘以一个系数(比如1.2)。

因此,在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然,这样做的后果就是不能图文混排了。

图片底部是基于文字基线的,而容器 div 的底部是低于基线的。所以这个空白实际上是文字基线以下的部分。

4.无论 img 设置 display:block 还是 vertical-align:top/bottom/middle 都将使 img 超出文字基线,致使空白消失。

 

---------------------------------------------------------------------------------------------------------这里是分割线----------------------------------------------------------------------------------------------------------------------------------------

这里只有图片,所以就采取了font-size:0的方法清除了底部的空白:
 
没有了这段空白区感觉看着舒服多了(*^__^*) 
 

如何清除img图片下面有一片空白的更多相关文章

  1. 清除行内元素之间的HTML空白

    原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...

  2. ios开发清除SDWebImage图片缓存

    一:一般在实际的项目应用中都会用到第三方框架SDWebImage去下载缓存图片,但在ios开发应用中,常常涉及对SDWebImage缓存图片的清除.本文所列出代码即是对SDWebImage缓存图片的清 ...

  3. web标准:img图片在ie6下显示空白的bug解决方案

    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”. 1.将图片转换为块级对象 ...

  4. 使用canvas截图网页为图片并解决跨域空白以及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...

  5. html2canvas截图问题,图片跨域导致截图空白

    年前的一个项目,要做一个H5截屏分享的功能,使用的是html2canvas插件,截图功能是实现了,但是跨域的图片死活不出来, 经过几天谷歌百度和不断的尝试,终于找到解决办法了,一共经历了让人心力憔悴的 ...

  6. Windows phone应用开发[21]-图片性能优化

    在windows phone 中常在列表中会常包含比较丰富文字和图片混排数据信息. 针对列表数据中除了谈到listbox等控件自身数据虚拟化问题外.虽然wp硬件设备随着SDK 8.0 发布得到应用可使 ...

  7. 获取网页上数据(图片、文字、视频)-b

    Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... . ...

  8. android对大图片的缓存处理

    废话不多说,直接上代码 package com.huge.emj.common.util; import java.io.File; import java.io.FileInputStream; i ...

  9. php随笔1-php图片处理

    php图片处理的知识内容 upload_image.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. Eclipse设置文字大小

    1,选择窗口,preference 2,general

  2. C# 中文在URL中的编码

      UTF-8中,一个汉字对应三个字节,GB2312中一个汉字占用两个字节. 不论何种编码,字母数字都不编码,特殊符号编码后占用一个字节. //按照UTF-8进行编码 string tempSearc ...

  3. Chapter 9:Noise-Estimation Algorithms

    作者:桂. 时间:2017-06-14  12:08:57 链接:http://www.cnblogs.com/xingshansi/p/6956556.html 主要是<Speech enha ...

  4. 【原创】源码角度分析Android的消息机制系列(三)——ThreadLocal的工作原理

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 先看Android源码(API24)中对ThreadLocal的定义: public class ThreadLocal<T> 即 ...

  5. 平衡树初阶——AVL平衡二叉查找树+三大平衡树(Treap + Splay + SBT)模板【超详解】

    平衡树初阶——AVL平衡二叉查找树 一.什么是二叉树 1. 什么是树. 计算机科学里面的树本质是一个树状图.树首先是一个有向无环图,由根节点指向子结点.但是不严格的说,我们也研究无向树.所谓无向树就是 ...

  6. 【转载】Windows系统下删除ubuntu

    原始日期:2013-11-02 15:51 以windows7为例:   用MbrFix.exe修复MBR 卸载Windows/Linux双系统中的Ubuntu1.如果你有Windows系统安装盘/启 ...

  7. 第13章 Linux的网络管理

    本文目录: 13.1 Linux数据包转发功能 13.2 和网络相关的几个文件说明 13.2.1 网卡配置文件ifcfg-* 13.2.2 DNS配置文件/etc/resolve.conf 13.2. ...

  8. css的各种选择器

    一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #foot ...

  9. IE11中navigator.userAgent的变化

    在原来判断浏览器是否是ie时,我们可以根据navigator.userAgent中时候有MSIE,但是IE11进行变革,userAgent中不在包含MSIE字段, 在实际项目中,入到类似的在控制台报错 ...

  10. 错误Fatal error: Call to undefined function mb_strlen()的解决办法

    其实这个就是没有开启php_mbstring模块.Windows下只需要修改安装目录下的php.ini文件把extension=php_mbstring.dll前面的“#”号注释符去掉保存后重启Apa ...