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. 安装Linux系统后配置的一般步骤

    安装linux后配置的一般步骤 最近在尝试不同的linux系统,记录一下安装完linux之后常用的软件的安装方法 1.源的更新 ubuntu 源的更新方法 参考(没有测试过,但是都大同小异,不行就换一 ...

  2. nginx+keepalived实现主从高可用

    设备: 主:192.168.200.122 从:192.168.200.124 安装:两台都分别安装nginx以及keepalived 两台机步骤一致一主一从 安装nginx的依赖包 [root@lo ...

  3. C++文件写入，读出函数ofstream，ifstream的使用方法

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间. 1.插入器(<<)  向流输出数据.比如说系统有一个默认的标准输出流(cout),一般情况下 ...

  4. maplotlib python 玩具绘图 横向纵向条状图

    from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...

  5. JavaScript的变量提升机制

    变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量 我们先来看下面这段代码,a的值是多少 代码1 console.log(a); ...

  6. 本地简单HTTP服务器

    cd进要启动服务器的目录 python -m http.server 7800 (Python 3.x) python -m SimpleHTTPServer 7998 (Pyhton2.x)

  7. Linux - TLCL

    三. 文件系统中跳转 pwd - Print name of current working directory cd - Change directory ls - List directory c ...

  8. 到底是哪个“O”管理内部人员风险？

    导读 俗话说,家和万事兴.与之相对的,家不睦则必自败.同理,如果缺乏明确的领导,内部人员风险管理项目或内部人威胁项目 (ITP) 也将走向失败. 俗话说,家和万事兴.与之相对的,家不睦则必自败.同理, ...

  9. vs2013设置不生成.sdf和ipch文件

    转载:https://blog.csdn.net/sinat_23338865/article/details/53393760 使用VS2013建立解决方案时,会生成SolutionName.sdf ...

  10. 结对编程任意Android App Demo

    一.产品说明 1．编写目的:用于获取百度图标. 2．情景设计:本产品用于展示图标.随着21世纪各类元素的普及,大部分的人群想下载各类网站的图标,也为了方便用户更便捷的下载而开发的. 3．Demo主要实 ...