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. win10无法登陆SSG进行WEB UI管理

    故障描述:尝试登录SSG设备时,无法无法刷出页面,但是设备时可以ping通的(内部接口),可以Telnet上设备,就是无法通过网页登录. 深入测试:win7的系统可以登录,win10的不行,浏览器报协 ...

  2. netty(一)---服务端源码阅读

    NIO Select 知识 select 示例代码 : //创建 channel 并设置为非阻塞 ServerSocketChannel serverChannel = ServerSocketCha ...

  3. .click() 和 onclick方法

    onclick=""只能绑定一次,再次绑定会把之前的覆盖 $('').click()可以绑定多次,再次绑定会在前一个程序执行完后触发

  4. go语言快速入门教程

    go快速入门指南 by 小强,2019-06-13 go语言是目前非常火热的语言,广泛应用于服务器端,云计算,kubernetes容器编排等领域.它是一种开源的编译型程序设计语言,支持并发.垃圾回收机 ...

  5. Windows 搭建WAMP+Mantis

    下载WAMP http://www.wampserver.com/ 安装直接下一步就行 安装完启动后,显示下面的logo 在浏览器输入 127.0.0.1/phpmyadmin    设置数据库(默认 ...

  6. Cosmetic Bottles - Cosmetic Packaging: What Are The Characteristics Of Trends?

    There are certain differences in products, of which cosmetics are the most obvious. In addition to t ...

  7. pdf.js的使用（2）新的需求已经出现，怎么能够停止不前（迪迦奥特曼主题曲）哈哈哈。^_^

    来,咱们看图说事 按钮1,2是pdf.js自带的,分别对应顺时针旋转90度,逆时针旋转90度.于是乎又要我做一个旋转180度的按钮,诺!按钮3来了. 1.别怂,干!首先顺藤摸瓜,看按钮1,2的html ...

  8. Update(Stage4)：spark_rdd算子：第2节 RDD_action算子_分区_缓存：算子和分区

    一.reduce和reduceByKey: 二.:RDD 的算子总结 RDD 的算子大部分都会生成一些专用的 RDD map, flatMap, filter 等算子会生成 MapPartitions ...

  9. 树莓派4B踩坑指南 - （12）谷歌浏览器书签同步

    书签和插件不能同步真的是不方便..使用时删掉※符号 过程比较复杂,坑很多,但确认有效 免费访问说明: https://github.com/max2max/fre※es※s 软件安装 https:// ...

  10. 【STM32H7教程】第54章 STM32H7的LTDC应用之LCD电阻触摸和电容触摸

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第54章       STM32H7的LTDC应用之LCD电阻 ...