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. Java JDK 1.5 1.6 1.7 新特性整理

    Java JDK 1.5的新特性 1.泛型 List<String> strs = new ArrayList<String>();//给集合指定存入类型,上面这个集合在存入数 ...

  2. java 面试题 高阶版

    1.hash 算法问题 hash(n) /服务器个数 hash 算法在服务器增加或者减少的时候,数据存取位置为发生变化: 什么是一致性hash算法? 一致性hash算法对2^32 取模,整个Hash空 ...

  3. Blockchain资源

    程序源码: https://github.com/HuangFJ/pyeth https://www.jianshu.com/p/b72b4eb259b8

  4. C语言：有序递增链表的插入问题。

    //已建立一个带头节点的单向链表,链表中的各结点按结点数据域中的数据递增有序连接.fun函数:把形参x的值放入一个新结点并插入链表中,使插入的各个数据域的数据仍保持递增有序. #include < ...

  5. powerbuilder连接oracle数据库

    一.打开已经安装好的pb9.0,主界面菜单栏有个两个圆柱形就行数据库连接,点击database. 二.选择oracle版本,由于数据库版本是9i,可以使用084 oracle8/8i.右键--选择ne ...

  6. jq 常用语句

    //jq post 请求 $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ }); // jq get ...

  7. Apache POI详解

    一 :简介 开发中经常会设计到excel的处理,如导出Excel,导入Excel到数据库中,操作Excel目前有两个框架,一个是apache 的poi, 另一个是 Java Excel Apache ...

  8. 吴裕雄 python 神经网络——TensorFlow训练神经网络：MNIST最佳实践

    import os import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_N ...

  9. java 抛出异常与finally的混用对于语句块的执行顺序的影响

    代码如下: package test1; public class EmbededFinally { public static void main(String args[]) { int resu ...

  10. 【原】Jenkins pipeline中资料总结

    docker-compose 快速部署持续集成测试环境 Gitlab+Harbor+Jenkins pipeline 实现 tag run docker Images https://www.cnbl ...