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. collections模块、时间模块、random模块、os模块、sys模块、序列化模块、subprocess模块

    一.collections模块 1.其他数据类型 在内置数据类型(str.dict.list.tuple.set)的基础上,collections模块还提供了了几个额外的数据类型:Counter.de ...

  2. 树莓派下编译并使用miracl密码库

    参考:Linux下编译并使用miracl密码库 MIRACL用户手册:https://wenku.baidu.com/view/d542f2ed0975f46527d3e1dc.html 具体过程. ...

  3. iOS 开发之使用链式编程思想实现简单的计算器

    链式编程思想是将多个操作(多行代码)通过点号(.)链接在一起成为一句代码,使代码可读性好.例如 a(1).b(2).c(3). 链式编程思想最为关键的是,方法的返回值是block,block必须返回对 ...

  4. Json日期格式化,出去返回的T

    第一种办法:前端JS转换: //格式化显示json日期格式 function showDate(jsonDate) { var date = new Date(jsonDate); var forma ...

  5. idea新建项目相关名词意义

    新建项目中的对比 建完之后的项目对比 对比 新建中Artifact的名称对应maven中名字 新建中package的名字对应的是项目中src下package名字 新建中project name的名字对 ...

  6. leetCode练题——28. Implement strStr()

    1.题目 28. Implement strStr()——Easy Implement strStr(). Return the index of the first occurrence of ne ...

  7. redis场景分析的很到位

    链接:http://www.zhihu.com/question/19829601/answer/88069207来源:知乎 1. MySql+Memcached架构的问题 实际MySQL是适合进行海 ...

  8. 抽取JDBC工具类

    package com.wbytts.util; import java.io.IOException; import java.io.InputStream; import java.sql.Con ...

  9. zabbix邮件脚本报警

    #启动邮箱服务 systemctl start postfix.service #配置用户的邮箱发送邮件 vim /etc/mail.rc set from="xxx@xxx.com&quo ...

  10. windows 删除进程

    win+R打开doc窗口 netstat -ano |findstr "8888" tskill 10120   结束进程