CSS - 去除图片img底侧空白缝隙
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底侧空白缝隙的更多相关文章
- css去除图片间隙
问题如下图 把图片转换成块状元素即可 .img{ display: block; } 解决后:
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- 转: 用css把图片转为灰色图
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- Django调用JS、CSS、图片等静态文件
zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- Spring MVC程序中得到静态资源文件css,js,图片
转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 网站性能优化之CSS无图片技术：三角形
1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...
随机推荐
- Mybatis 结果集映射
结果映射(resultMap) constructor - 用于在实例化类时,注入结果到构造方法中(一般不用) idArg - ID 参数:标记出作为 ID 的结果可以帮助提高整体性能 arg - 将 ...
- Java 使用代理发送Http请求 （将Http请求代理Https请求）
package com.test.porxy; import java.io.BufferedReader; import java.io.IOException; import java.io.In ...
- php虚拟主机下实现定时任务（仅供参考）
因为要做简单的中控 在实现心跳包的时候遇到了困难 正常的心跳包思路是这样的 举个例子 我写一个登陆签到脚本 当我登陆成功的时候 会把登陆成功这个状态传递给网络上的中控端 当我签到完成的时候会把 ...
- Go语言基础之runtime包
文章引用自 Golang中runtime的使用 runtime调度器是非常有用的东西,关于runtime包几个方法: Gosched:让当前线程让出cpu以让其他线程运行,它不会挂起当前线程,因此当前 ...
- SpringMVC Controller 接收页面传递的中文参数出现乱码
在Controller中接收到的POST参数如果是中文的话,显示为乱码.已知客户端传过来时编码为UTF-8. 问题产生分析: spring MVC中默认的编码格式为“ISO-8859-1”,因此造成乱 ...
- （二）tensorflow-gpu2.0之自动导数
import tensorflow as tf ''' 梯度:导数或偏导数 1.在什么点的导数:在点(a,b,c,w)=(1,2,3,4)点的导数 2.梯度环境 对谁求导: 对w求导 函数: y = ...
- SmartAssembly批处理用法
在SmartAssembly.exe根目录有个SmartAssembly.com . 在命令行执行SmartAssembly.com就能看到所有的命令参数了. 用SmartAssembly.exe建好 ...
- ES6：let 与 const
在ES6中,let 用来定义变量,const 用来定义常量 事实上var可以看成是js语言设计上的错误,但是不能移除,因为需要向后兼容 于是提出了一个新的关键字let,可以将let看成更完美的var ...
- POJ-1087 A Plug for UNIX （网络流）
思路 电器数1 ~ 100,附带100种接口,注意题目:You notice that some of the devices use plugs for which there is no rece ...
- WORKDIR 指定工作目录 每一个 RUN 都是启动一个容器、执行命令、然后提交存储层文件变更
WORKDIR 指定工作目录 格式为 WORKDIR <工作目录路径>. 使用 WORKDIR 指令可以来指定工作目录(或者称为当前目录),以后各层的当前目录就被改为指定的目录,如该目录不 ...