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. samba - 为 UNIX 实现的 Windows SMB/CIFS 文件服务器

    SYNOPSIS 总览 Samba DESCRIPTION 描述 samba 套件是在 UNIX 系统上实现“服务器信息块”(通常简称 SMB) 协议的一组程序.这个协议有时也称为“通用互联网文件系统 ...

  2. Linux学习笔记之磁盘与文件系统的管理

    三．Linux磁盘与文件系统的管理 MBR扇区(512B) 磁盘的分区组成 Boot sector    扇区(用来装引导程序) Super block   记录inode与Block的信息 Inod ...

  3. H5手机端底部菜单覆盖中间部分内容的解决办法

    一.第一种Js动态计算中间内容的高度. 二.第二种给底部上面写个<div style="底部的高度"></div> 三.第三种给中间部分写一个margin- ...

  4. 实现多线程的三种方法：Thread、Runnable和Callable

    继承Thread类,重写run()方法 步骤: (1) 定义类继承Thread类 (2) 复写Thread类中的run方法. (3) 调用线程的start方法 (start方法有两种含义:1. 启动多 ...

  5. Informatica参考

    近日在做informatica项目时,要求参照informatica中原有的mapping方式实现.那么当知道源表或者目标表或者是映射时,如何快速的找出分散在不同的Subject的mapping或者是 ...

  6. java 局部变量与成员成员变量的区别

    package java04; /* 局部变量和成员变量的不同: 1.定义的位置不一样 局部变量:定义在方法内部 成员变量:在方法外部,直接写在类中 2.作用范围不一样 局部变量:只有方法中能使用,除 ...

  7. jquery对象中 “冒号” 详解

      冒号  可以理解为 “匹配” 或 “选取”的意思.   $(":button") 表示匹配所有的按钮.$("input:checked")表示匹配所有选中的 ...

  8. Halo（十一）

    Spring Boot 继承 AbstractErrorController 实现全局异常处理 @RequestMapping("${server.error.path:${error.pa ...

  9. Git 中关于一次完整的提交的命令

    1.创建仓库(git init .git clone URL) 有两种新建 Git 项目仓库的方法.第一种是在本地通过初始化来创建新的 Git 仓库.第二种是从已有的 Git 远程仓库中克隆出一个仓库 ...

  10. linux 正则表达式与实践

    正则表达式基础 准备 (1)alias grep='grep --color=auto' 易于显示 (2)LC_ALL=C,字符集,设置环境变量,字符顺序 基础正则 1)^word  匹配以Word开 ...