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. Eclipse无法查看第三方jar包文件源代码解决方法

    来源于:https://www.cnblogs.com/1995hxt/p/5252098.html 1.打开第三方依赖包,源文件的快捷键:ctrl + mouseClick 2.由于我们下载的第三方 ...

  2. 【前端基础之HTML】

    " 目录 一.HTML介绍 二.head内常用标签 三.body内常用标签 一.HTML介绍 1. web服务本质 from socket import socket, SOL_SOCKET ...

  3. 安卓之button按钮

    一.需求 短按按钮时显示  您点击了控件:Button 长按按钮时显示  您点击了控件:Button 二.布局xml文件 <?xml version="1.0" encodi ...

  4. 传奇GOM引擎授权过期解决方法.

    传奇GOM引擎授权过期解决方法 下载最新的GOM引擎,将里面的Key.Lic文件找出来,替换掉授权过期的版本,如果你本身是免费版最好是找同样的免费版的来覆盖. 如果你本身是免费版,但是却用的是商业版K ...

  5. python重要的日志模块logging

    一,logging模块简介 logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等:相比print,具备如下优点: 1.可以通过设置 ...

  6. 寒假pta一

    打印沙漏 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐 ...

  7. matplotlib学习（2）

    1.legend的学习(图例)1.1 代码 import matplotlib.pyplot as plt import numpy as np x=np.linspace(-3,3,50) #从-1 ...

  8. 【Hutool】工具类之日期时间工具-DateUtil

    日期时间工具类 一.依赖 <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-al ...

  9. 学习笔记——springMVC架构

    springMVC是一个MVC模式的实现,至于具体什么是MVC大佬们写了多很详细的博文给出一些链接: 链接1. SpringMVC框架“简单”执行流程 1.首先用户(或浏览器)发送请求到服务端. 2. ...

  10. 【HV】HVIL-High Voltage Interlock Loop

    HVIL高压互锁功能 1.HVIL作用 High Voltage Interlock Loop 高压互锁,是在"ISO6469-3:电动汽车安全技术规范第三部分:人员电气伤害防护" ...