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无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...
随机推荐
- 吴裕雄 python 神经网络——TensorFlow 三层简单神经网络的前向传播算法
import tensorflow as tf w1= tf.Variable(tf.random_normal([2, 3], stddev=1, seed=1)) w2= tf.Variable( ...
- eclipse链接mySQL数据库常见错误
1错误: 解决: 2,用户名输入错误 解决:查看自己的正确用户名https://zhidao.baidu.com/question/248308313.html 3. 解决: 链接示例:https:/ ...
- CSS选择器效率问题
今天学习了CSS各类选择器,对其效率问题有些疑问,故总结了一些学习笔记 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的 ...
- 记一次深坑，dubbo暴露的服务无法注册到zookeeper的原因
项目用的架构,springboot,dubbo,zookeeper dubbo的provider作为服务单独使用,里面的service实现类使用了@Transactional注解,想集成spring的 ...
- nginx+keepalived+tomcat实现主从高可用负载均衡
设备: 1.准备四台虚拟机,两台tomcat,两台nginx 2.两台tomcat配置相同,测试页不同 两台Tomcat配置完全相同.只有测试页面不同 安装jdk和tomcat [root@local ...
- centos7.5下安装jenkins
最近从头搭建了一套python+selenium+pytest+allure+Jenkins的环境,虽然网上挺多的,不过还是记录下来,毕竟坑还是挺多的....... 先从搭建jenkins开始把! 方 ...
- 获取 input type=file 上次文件的路径
可以通过 $('这个元素').val();得到全路径:
- rapidxml编写xml文件（一）
int writeXML(void) { rapidxml::xml_document<> doc; rapidxml::xml_node<> *rot = doc.alloc ...
- Vue-表单提交
template <form @submit.prevent="submitFrom"> <!-- 注册提交事件 .prevent 阻止表单的默认提交行为 --& ...
- windows 域控用户记住最后一次登录用户名
1,记住最后一次登录用户名 运行 gpedit.msc命令 禁用设置