空白产生原因： 图片默认的vertical-align是baseline，（元素放置在父元素的基线上，也就是xx下边距）

一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

所以我们只需要将img图片display:block，即可去掉div和img之间的空白

或者将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;}

也可以将font-size设为0，实际上也是改变了line-height

当然，我们可以改变vertical-align，让它不是baseline，比如设置vertical-align:middle

如何解决div里面img图片下方有空白的问题？的更多相关文章

  1. 图片下方出现多3px的原因及解决方法

    产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...

  2. vertical-align和图片下方空白问题

    <style> .box1,.box2{ display: inline-block; background-color:#f0f3f9; width:150px; height: 150 ...

  3. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

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

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

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

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

  6. javascript焦点图(根据图片下方的小框自动播放)

    html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...

  7. css之图片下方定位遮掩层

    需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...

  8. 解决 div或者a标签的高度比里面的img高度多的 问题

    今天做练习遇到一个问题,分享一下解决办法: 在编写html中的一个放置图片时,代码如下: <div class="nrtp"> <div class=" ...

  9. div中的图片跑出来

    一:div中的图片跑出来 <style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> < ...

随机推荐

  1. Linux系统修改网卡名（eth0-3）

    一.命名规则策略 规则1: 对于板载设备命名合并固件或 BIOS 提供的索引号,如果来自固件或 BIOS 的信息可读就命名,比如eno1,这种命名是比较常见的,否则使用规则2. 规则2: 命名合并固件 ...

  2. tomcat如何登录Server Status、Manager App、Host Manager

    启动tomcat后,访问127.0.0.1会进入如下页面 版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址:https://www.cnblogs.com/poterliu/p/9602 ...

  3. 面向对象之元类（metaclass）

    一.前言: 要搞懂元类必须要搞清楚下面几件事: 类创建的时候,内部过程是什么样的,也就是我们定义类class 类名()的过程底层都干了些啥 类的调用即类的实例化过程的了解与分析 我们已经知道元类存在的 ...

  4. 20188472 https://www.cnblogs.com/chenzg90826/

    我是一名学计算机的大一学生,对学计算机比较感兴趣,但是对于计算机的了解程度还不够深,所以我在这方面还只是一个初学者.经过了一个学期对计算机和编程语言的学习,我觉得要真正的学好这门专业真的还要更努力.在 ...

  5. Leetcode21--->Merge Two Sorted Lists(合并两个排序的单链表)

    题目: 给出两个排序的单链表,合并两个单链表,返回合并后的结果: 解题思路: 解法还是很简单的,但是需要注意以下几点: 1.  如果两个链表都空,则返回null; 2.  如果链表1空,则返回链表2的 ...

  6. Web - DOM

    1. 简介 DOM(Document Object Mode)是一套web标准,地那一了访问HTML文档的一套属性.方法和事件 其本质: 网页 与 脚本语言 沟通的桥梁 脚本语言通过DOM对象来访问H ...

  7. python - 字符串的格式化输出

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_2_str.py@ide: PyCharm Community ...

  8. 一张图展示：用两个栈来实现一个队列，完成队列的Push和Pop操作

    一  基本思路 将s1作为存储空间,以s2作为临时缓冲区. 入队时,将元素压入s1. 出队时,将s1的元素逐个“倒入”(弹出并压入)s2,将s2的顶元素弹出作为出队元素,之后再将s2剩下的元素逐个“倒 ...

  9. 零基础学习 Python 之前期准备

    写在之前 从今天开始,我将开始新的篇章 -- 零基础学习 Python,在这里我将从最基本的 Python 写起,然后再慢慢涉及到高阶以及具体应用方面.我是完全自学的 Python,所以很是明白自学对 ...

  10. Multi-Dimensional Recurrent Neural Networks

    Multi-Dimensional Recurrent Neural Networks The basic idea of MDRNNs is to replace the single recurr ...