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. Python Web开发:使用Django框架创建HolleWorld项目

    开发环境搭建 Python环境安装 下载地址:https://www.python.org/downloads// Django安装 打开Windows CMD输入pip install django ...

  2. python关键字global和nonlocal总结

    函数中使用全局变量 a = 100 b = 200 def func(): def sub(): return b return a + b + sub() 执行fun()后返回值为:500 a, b ...

  3. Object.assign()遇到的问题分析

    概念 Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象.语法如下: Object.assign(target, ...sources) Obj ...

  4. VisualVM监控远程主机

    参考博客 https://blog.csdn.net/u010004317/article/details/82948040 https://blog.csdn.net/lienfeng6/artic ...

  5. java 反转数组

    package java03; public class Demo05ArrayReversr { public static void main(String[] args) { int[] arr ...

  6. MFC程序执行过程剖析（转）

    一 MFC程序执行过程剖析 1)我们知道在WIN32API程序当中,程序的入口为WinMain函数,在这个函数当中我们完成注册窗口类,创建窗口,进入消息循环,最后由操作系统根据发送到程序窗口的消息调用 ...

  7. vue之路由传参三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  8. SDOI2019R2翻车记

    额...貌似是学OI以来翻得最惨的一次比赛了呢... 不过还好是初三 但是没有机会和学长们打最后一场告别赛了呢(笑 按照惯例还是要记录一下吧. DAY ? 中考倒计时30天.来写这篇游记. DAY 0 ...

  9. centos6.5 相关命令

    挂载U盘 1.进入mnt目录: #cd /mnt 2.新建一个USB目录: #mkdir usb 3.查看U盘的目录: #fdisk –l 4.挂载: #mount –t vfat /dev/sdb1 ...

  10. 如何使用WidsMob Montage—蒙太奇制作有趣的动物照片？

    今天,越来越多的人有宠物.根据最近的一项调查,超过六成的美国人在家中至少有一只宠物.这些宠物不是动物,而是家庭成员.因此,有趣的动物照片成为社交媒体上的热门话题是有道理的.当您打开朋友圈或短视频APP ...