如何清除img图片下面有一片空白
最近在做项目突然发现用了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 超出文字基线,致使空白消失。
---------------------------------------------------------------------------------------------------------这里是分割线----------------------------------------------------------------------------------------------------------------------------------------

如何清除img图片下面有一片空白的更多相关文章
- 清除行内元素之间的HTML空白
原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...
- ios开发清除SDWebImage图片缓存
一:一般在实际的项目应用中都会用到第三方框架SDWebImage去下载缓存图片,但在ios开发应用中,常常涉及对SDWebImage缓存图片的清除.本文所列出代码即是对SDWebImage缓存图片的清 ...
- web标准:img图片在ie6下显示空白的bug解决方案
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”. 1.将图片转换为块级对象 ...
- 使用canvas截图网页为图片并解决跨域空白以及模糊问题
前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...
- html2canvas截图问题,图片跨域导致截图空白
年前的一个项目,要做一个H5截屏分享的功能,使用的是html2canvas插件,截图功能是实现了,但是跨域的图片死活不出来, 经过几天谷歌百度和不断的尝试,终于找到解决办法了,一共经历了让人心力憔悴的 ...
- Windows phone应用开发[21]-图片性能优化
在windows phone 中常在列表中会常包含比较丰富文字和图片混排数据信息. 针对列表数据中除了谈到listbox等控件自身数据虚拟化问题外.虽然wp硬件设备随着SDK 8.0 发布得到应用可使 ...
- 获取网页上数据(图片、文字、视频)-b
Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... . ...
- android对大图片的缓存处理
废话不多说,直接上代码 package com.huge.emj.common.util; import java.io.File; import java.io.FileInputStream; i ...
- php随笔1-php图片处理
php图片处理的知识内容 upload_image.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
随机推荐
- 纯css实现select下拉框并排显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一天搞定CSS:盒模型content、padding、border、margin--06
1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...
- JS中的函数传参
前言: 函数分为有参有返回值,有参无返回值,无参无返回值,无参有返回值:那么对于无参数的函数你想使用函数的调用怎么办呢?如果你想封装一个代码,实现多种功能,但是形参大于实参或者实参大于形参又该如何?本 ...
- 用Nodejs做一个简单的小爬虫
Nodejs将JavaScript语言带到了服务器端,作为js主力用户的前端们,因此获得了服务器端的开发能力,但除了用express搭建一个博客外,还有什么好玩的项目可以做呢?不如就做一个网络爬虫吧. ...
- python 自定义回调函数
回调函数用起来比较爽.特别是在js中,满世界全是回调,那么在python中,怎么来优雅地实现自己的回调函数呢 下面贴一个我写的例子 class BaseHandler(object): def cra ...
- [USACO4.2]草地排水Drainage Ditches
题目背景 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草 要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹 ...
- AngularJS的文字溢出处理
需求大致如图所示,由于本人也是新接触AngularJS,研究好久,制作了一个demo,代码如下: <!DOCTYPE html><html><head><me ...
- Docker 初步认识
1.docker 是什么? 一个开源的应用容器引擎,个人理解 就是虚拟的应用运行环境. 2.安装Docker for windows 下载地址 :https://store.docker.com/ed ...
- jquery $.each 和for 怎么跳出循环
jquery $.each 和for 怎么跳出循环 1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环.2.而在jquery中 $.each则对应的使用r ...
- 流畅的python学习笔记第七章:装饰器
装饰器就如名字一样,对某样事物进行装饰过后然后返回一个新的事物.就好比一个毛坯房,经过装修后,变成了精装房,但是房子还是同样的房子,但是模样变了. 我们首先来看一个函数.加入我要求出函数的运行时间.一 ...