1. 图片底部有空隙

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	img {

/*		vertical-align: middle;*/

/*		display: block;*/

	}

	div {

		border: 2px solid red;

	}

	</style>

</head>

<body>

	<div>

		<img src="images/3.jpg" height="252" width="448" alt="">

		 my name is allin

	</div>

</body>

</html>

2. 原理

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐(即默认vertical-align: baseline)。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

3. 解决方法

3.1 方法一：vertical-align:top | bottom | middle

3.2 方法二： 将行内元素或行内块元素转换为块级元素

4. PS: vertical-align

vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

CSS - 去除图片img底侧空白缝隙的更多相关文章

  1. css去除图片间隙

    问题如下图 把图片转换成块状元素即可 .img{ display: block; } 解决后:

  2. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  3. 转: 用css把图片转为灰色图

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  4. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  5. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  6. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  7. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  8. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  9. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

随机推荐

  1. PTA的Python练习题（十七）

    第4章-19 矩阵运算 a=eval(input()) s=[] count=0 for i in range(a): b=input() s.append([int(i) for i in b.sp ...

  2. zabbix4.4安装和简要设置

    简介 Zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.它能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...

  3. SpringCloud全家桶学习之客户端负载均衡及自定义负载均衡算法----Ribbon（三）

    一.Ribbon是什么? Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端  负载均衡的工具(这里区别于nginx的负载均衡).简单来说,Ribbon是Netf ...

  4. $ git push -u origin master

    我们第一次推送master分支时,由于远程库是空的,加上了-u参数,Git不但会把本地的master分支内容推送的远程新的master分支,还会把本地的master分支和远程的master分支关联起来 ...

  5. @ModelAttribute与@RequestBody的区别

    一.@ModelAttribute与@RequestBody的区别 @ModelAttribute与@RequestBody都是用来注解解析前端发来数据,并自动对应到所定义的字段名称. 这里先放结论, ...

  6. 为什么阿里Java手册推荐慎用 Object 的 clone 方法来拷贝对象

    图片若无法显示,可至掘金查看https://juejin.im/post/5d425230f265da039519d248 前言 在阿里Java开发手册中,有这么一条建议:慎用 Object 的 cl ...

  7. WinForm开发(3)——使用vs2017打包winform安装程序的过程

    一.安装打包插件 注:安装好重启vs2017 ​ ​ 二.打包过程 ​ ​ 添加文件入口 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

  8. 吴裕雄--天生自然TensorFlow2教程：多输出感知机及其梯度

    import tensorflow as tf x = tf.random.normal([2, 4]) w = tf.random.normal([4, 3]) b = tf.zeros([3]) ...

  9. WebView 中图片长按出现弹框，点击存储图像闪退的解决方案

    在使用 WKWebView 展示 H5 时,如果 H5 中有图片,长按图片会出现弹框,在 iOS11 系统中,存储图像,如果未开启相册权限,会直接 Crash 掉: 解决方案一(原生解决): 在代理方 ...

  10. mysqld: [ERROR] Found option without preceding group in config file D:\TONG\mysql-5.7.19-winx64\my.ini at line 1!

    my.ini文件编码不对,改为ANSI 貌似大意是说,配置不全 改编码为ANSI解决