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. 17-正交矩阵和Gram-Schmidt正交化

    一.视频链接 1)正交矩阵 定义:如果一个矩阵,其转置与自身的乘积等于单位向量,那么该矩阵就是正交矩阵,该矩阵一般用Q来表示,即$Q^TQ=QQ^T=I$,也就是$Q^T=Q^{-1}$,即转置=逆 ...

  2. springboot中MongoDB的使用

    转载参考:http://www.ityouknow.com/springboot/2017/05/08/spring-boot-mongodb.html MongoDB 是一个高性能,开源,无模式的文 ...

  3. JDK1.8新特性之Stream类初识

    JDK1.8新特性之Stream类初识 import java.util.Arrays; import java.util.List; import java.util.Optional; impor ...

  4. vue中v-model详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据 ...

  5. python如何在shell命令行执行创建用户命令

  6. 数据流:DataOutputStream与DataInputStream的使用

    看这两个类的名字就不难猜测出它们的类关系图. DataOutputStream: 主要是一些writeXxx()操作,写出, 相当于序列化 DataInputStream: 主要是一些readXxx( ...

  7. 数字电路的与门、或门、非门--FPGA--005

    作者:young cc 链接:https://www.zhihu.com/question/23829080/answer/123791730来源:知乎著作权归作者所有,转载请联系作者获得授权. 数字 ...

  8. 【CF1256】Codeforces Round #598 (Div. 3) 【思维+贪心+DP】

    https://codeforces.com/contest/1256 A:Payment Without Change[思维] 题意:给你a个价值n的物品和b个价值1的物品,问是否存在取物方案使得价 ...

  9. Linux0.11内核源码——内核态线程(进程)切换的实现

    以fork()函数为例,分析内核态进程切换的实现 首先在用户态的某个进程中执行了fork()函数 fork引发中断,切入内核,内核栈绑定用户栈 首先分析五段论中的第一段: 中断入口:先把相关寄存器压栈 ...

  10. BUUCTF平台：RSA

    RSA import gmpy2 def Decrypt(c,e,p,q): L=(p-1)*(q-1) d=gmpy2.invert(e,L) n=p*q m=gmpy2.powmod(c,d,n) ...