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之间的空隙的更多相关文章

  1. 解决input之间的空隙

    <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. <转载>解决div里面img的缝隙问题

    转载自:http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html   练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决 ...

  3. 如何让input之间无空隙

    有如下两个input: <form action="http://www.example.com/index/search" method="get"&g ...

  4. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...

  5. HTML解决div里面img的缝隙问题

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...

  6. 解决div里面img的缝隙问题(转)

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...

  7. 解决div里插入img下边缝隙问题

    <html>   <head>   <title> new document </title>   <meta name="author ...

  8. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  9. 如何解决两个li之间的缝隙

    如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...

随机推荐

  1. 靶场练习--sqli(3&4)

    第三关 先解决一下第二关遗留下来的问题,嘻嘻.看来数据库原理应当过一遍~ 1.首先判断是否有SQL注入,然后再看是数字型.字符型.发现这里是字符型. 2.order by 查询字段数,记得后面要加一个 ...

  2. C语言实现读取文件所有内容到字符串

    #include "stdio.h" #include "string" #include "stdlib.h" using namespa ...

  3. 阿里腾讯校招Java面试题总结及答案

    阿里校招java面试题汇总 1.HashMap和HashTable的区别,及其实现原理. Hashtable继承自Dictionary类,而HashMap是Java1.2引进的,继承自Abstract ...

  4. bzoj1190 [HNOI2007]梦幻岛宝珠 背包

    题目 https://lydsy.com/JudgeOnline/problem.php?id=1190 题解 好神仙的一道题啊. 既然 \(w_i = a_i\cdot 2^{b_i}\),那么不妨 ...

  5. idea 离线安装 lombok插件

    Lombok简介 Lombok是Java语言的实用工具,确切的说,应该说是一个很好用的插件,对,插件!可以用来帮助开发人员消除Java代码的冗长,尤其是对于简单的Java对象(POJO),它通过注解实 ...

  6. 一个简单的JSP 连接MySQL使用实例

    一.软件环境 下载并安装MySQL,Tomacat,JDBC.MyEclipse或其他IDE. 二.环境配置 将其环境变量配置好之后,下载Java 专用的连接MySQL的驱动包JDBC,有人会发现在一 ...

  7. Security基础(六):部署Zabbix监控平台、配置及使用Zabbix监控系统、自定义Zabbix监控项目、实现Zabbix报警功能

    一.部署Zabbix监控平台 目标: 本案例要求部署一台Zabbix监控服务器,一台被监控主机,为进一步执行具体的监控任务做准备: 在监控服务器上安装LAMP环境    修改PHP配置文件,满足Zab ...

  8. AcWing 314. 低买 (线性DP)打卡

    题目:https://www.acwing.com/problem/content/316/ 题意:求一个最长单调递减子序列,然后并且求方案数,如果序列完全一样就不要了 思路:我们肯定时修改LIS,我 ...

  9. 对GridFS数据进行分片

    On this page files 集合 chunks 集合 在对 GridFS 存储进行分片时,需要注意以下的情况: files 集合 大多数情况下不需要对 files 集合进行分片,这个集合通常 ...

  10. 1.OpenCV数据类型

    基础类型 1.模板类cv::Vec<> 固定向量类,维度已知的小型向量——处理效率高 2.cv::Point类(Point2i,Point2f,Point2d;Point3i,Point3 ...