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. 【转】直播流程，视频推流，视频拉流，简介，SMTP、RTMP、HLS、 PLPlayerKit

    原:https://www.cnblogs.com/baitongtong/p/11248966.html 1 .音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放 ...

  2. SEO 建站过程复盘

    今天在A5看到一篇关于一个牛站的复盘,整个建站过程值得借鉴. https://www.admin5.com/article/20200218/943930.shtml

  3. 《MySQL命令执行过程和存储引擎概述》阅读笔记

    使用MySQL的完整过程: 启动MySQL服务器程序. 启动MySQL客户端程序并连接到服务器程序. 在客户端程序中输入一些命令语句发送到服务器程序,服务器程序收到这些请求后,会根据请求的内容来操作具 ...

  4. SQLite3创建表及操作

    SQLite 创建表 SQLite 的 CREATE TABLE 语句用于在任何给定的数据库创建一个新表.创建基本表,涉及到命名表.定义列及每一列的数据类型. 语法 CREATE TABLE 语句的基 ...

  5. matlab学习记录

    1.在命令框输入preferences,可以调整字体大小 2.产生正太分布函数 参考:https://blog.csdn.net/s334wuchunfangi/article/details/816 ...

  6. 服务器(1)——IIS(1)——Windows7中IIS简单安装与配置(详细图解)

    最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功. 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二.点击左侧“打开或关闭Windows功能” ...

  7. DVWA的文件上传漏洞（high）

    1.使用文件包含漏洞和文件上传漏洞,来连接shell 文件包含漏洞详细的漏洞介绍:https://blog.csdn.net/Vansnc/article/details/82528395 文件包含函 ...

  8. html 中js 如何给字符串加换行符

    var str = 你好'+"\n"+ '世界'; 这种写法在html中是会被识别为"你好\n世界" 那么如何保证其这么写会被识别,只需要在该div的样式中加入 ...

  9. 无数据库模式kong/kong-ingress-controller

    apiVersion: v1kind: Namespacemetadata:  name: kong---apiVersion: apiextensions.k8s.io/v1beta1kind: C ...

  10. Java语言特性、加载与执行

    [开源.免费.纯面向对象.跨平台] 简单性: 相对而言,例如,Java是不支持多继承的,C++是支持多继承的,多继承比较复杂:C++ 有指针,Java屏蔽了指针的概念.所以相对来说Java是简单的. ...