解决div和img之间的空隙
div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下。
先上代码和效果图:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0
}
div{
margin: 0 auto;
max-width: 400px;
}
img{
width: 100%;
}
.bb{
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="b">
<img src="./t.jpg" alt="">
</div>
<div class="bb"></div>
</body>
</html>

总结了下解决方法还不少:
1.将img设置为block;
这个基本可以解决img和div下方的缝隙问题。
2.设置img的竖直对齐方式
v-align:bottom;
3.设置父级div的font-size:0;
4.设置外层的div的line-height:0
在这里推荐第一种。
解决div和img之间的空隙的更多相关文章
- 解决input之间的空隙
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...
- <转载>解决div里面img的缝隙问题
转载自:http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html 练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决 ...
- 如何让input之间无空隙
有如下两个input: <form action="http://www.example.com/index/search" method="get"&g ...
- 解决div里面img的缝隙问题~
解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...
- HTML解决div里面img的缝隙问题
图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...
- 解决div里面img的缝隙问题(转)
图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...
- 解决div里插入img下边缝隙问题
<html> <head> <title> new document </title> <meta name="author ...
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- 如何解决两个li之间的缝隙
如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...
随机推荐
- 靶场练习--sqli(3&4)
第三关 先解决一下第二关遗留下来的问题,嘻嘻.看来数据库原理应当过一遍~ 1.首先判断是否有SQL注入,然后再看是数字型.字符型.发现这里是字符型. 2.order by 查询字段数,记得后面要加一个 ...
- C语言实现读取文件所有内容到字符串
#include "stdio.h" #include "string" #include "stdlib.h" using namespa ...
- 阿里腾讯校招Java面试题总结及答案
阿里校招java面试题汇总 1.HashMap和HashTable的区别,及其实现原理. Hashtable继承自Dictionary类,而HashMap是Java1.2引进的,继承自Abstract ...
- bzoj1190 [HNOI2007]梦幻岛宝珠 背包
题目 https://lydsy.com/JudgeOnline/problem.php?id=1190 题解 好神仙的一道题啊. 既然 \(w_i = a_i\cdot 2^{b_i}\),那么不妨 ...
- idea 离线安装 lombok插件
Lombok简介 Lombok是Java语言的实用工具,确切的说,应该说是一个很好用的插件,对,插件!可以用来帮助开发人员消除Java代码的冗长,尤其是对于简单的Java对象(POJO),它通过注解实 ...
- 一个简单的JSP 连接MySQL使用实例
一.软件环境 下载并安装MySQL,Tomacat,JDBC.MyEclipse或其他IDE. 二.环境配置 将其环境变量配置好之后,下载Java 专用的连接MySQL的驱动包JDBC,有人会发现在一 ...
- Security基础(六):部署Zabbix监控平台、配置及使用Zabbix监控系统、自定义Zabbix监控项目、实现Zabbix报警功能
一.部署Zabbix监控平台 目标: 本案例要求部署一台Zabbix监控服务器,一台被监控主机,为进一步执行具体的监控任务做准备: 在监控服务器上安装LAMP环境 修改PHP配置文件,满足Zab ...
- AcWing 314. 低买 (线性DP)打卡
题目:https://www.acwing.com/problem/content/316/ 题意:求一个最长单调递减子序列,然后并且求方案数,如果序列完全一样就不要了 思路:我们肯定时修改LIS,我 ...
- 对GridFS数据进行分片
On this page files 集合 chunks 集合 在对 GridFS 存储进行分片时,需要注意以下的情况: files 集合 大多数情况下不需要对 files 集合进行分片,这个集合通常 ...
- 1.OpenCV数据类型
基础类型 1.模板类cv::Vec<> 固定向量类,维度已知的小型向量——处理效率高 2.cv::Point类(Point2i,Point2f,Point2d;Point3i,Point3 ...