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. ubuntu16.04的一系列安装

    1.安装ubuntu https://blog.csdn.net/weixin_40494464/article/details/81010256 2.ubuntu里选择简体中文 https://bl ...

  2. springBoot+mysql+mybatis demo [基本配置] [遇到的问题]

    springBoot+mysql+mybatis的基本配置: 多环境 application.properties spring.profiles.active=dev spring.applicat ...

  3. bzoj1495 [NOI2006]网络收费 复杂度分析+树上背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1495 题解 通过观察可以发现,对于一个 \(lca\),如果 \(nA \leq nB\),那 ...

  4. Python repr, str, eval 使用小记 及 str 和 repr的区别

    >>> s = '1+2'>>> x = eval(s) #把引号剥离一次,就变成了运算1+2>>> x3>>> ss = st ...

  5. Redis Key过期事件

    解决方案1: 可以利用redis天然的key自动过期机制,下单时将订单id写入redis,过期时间30分钟,30分钟后检查订单状态,如果未支付,则进行处理但是key过期了redis有通知吗?答案是肯定 ...

  6. Redis Bloom Filter

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11632622.html 背景 比如刷抖音的时候,抖音会不停的推荐新的内容,而它每次推荐时候都要去重,以 ...

  7. Jenkins之配置GitHub-Webhook2

    什么是持续集成(Continuous integration) 提出者Martin Fowler本人对持续集成是这样定义的:持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每 ...

  8. Linux进程管理工具vmstat,iostat,pmap

    一查看内存的工具——vmstat (一)vmstat的介绍 vmstat vmstat是Virtual Memory Statistics(虚拟内存统计)的缩写 利用vmstat命令可以对操作系统的报 ...

  9. SSH框架整合-myeclipse

    项目结构   1.mysql数据库 stuinfo /* SQLyog 企业版 - MySQL GUI v8.14 MySQL - 5.5.40 : Database - stuinfo ****** ...

  10. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...