空白产生原因： 图片默认的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关于yum

    yum仓库设置:1.cd /etc/yum.repos.d yum仓库 2.CentOS-Base.repo 网络源 CentOS-Media.repo 光盘源 设置 vi CentOS-Media. ...

  2. 关于上传文件 非ajax提交 得到后台数据问题

    <form name="configForm" id="configForm" method="post" action=" ...

  3. Solr 中的 docValues=true

    前言:  在Lucene4.x之后,出现一个重大的特性,就是索引支持DocValues,这对于广大的solr和elasticsearch用户,无疑来说是一个福音,这玩意的出现通过牺牲一定的磁盘空间带来 ...

  4. POJ：1904-King's Quest

    King's Quest Time limit15000 ms Case time limit2000 ms Memory limit65536 kB Description Once upon a ...

  5. STM8 EEPROM心得

    对于STM8来说,其内部的EEPROM确实是个不错的东西,而且STM8S103/105价格已经非常便宜了,当然也可以用STM8S003/005代替,而且价格更便宜,大概在,1.2/2.0元左右,比10 ...

  6. 使用supervisor方便调试程序

    调试过程中,有时需要修改代码,并时刻看到运行效果.如果每次终止程序又重启,会很麻烦. 可以使用supervisor,它可以监听代码文件,一旦发生改动会自动重启程序. 安装supervisor命令: n ...

  7. SPOJ COT2 Count on a tree II 树上莫队算法

    题意: 给出一棵\(n(n \leq 4 \times 10^4)\)个节点的树,每个节点上有个权值,和\(m(m \leq 10^5)\)个询问. 每次询问路径\(u \to v\)上有多少个权值不 ...

  8. OpenSSL SNI

    网站ssl检测工具 https://www.ssllabs.com/ssltest/analyze.html?d=gggl.houseoflux.com.cn https://myssl.com/  ...

  9. Selenium WebDriver-打开3个网址截图，文件夹用年月日命名，图片用当前时分秒命名

    import os import os.path import time from selenium import webdriver urls=["http://www.baidu.com ...

  10. linux随笔4

    vim编辑器: 启动vim编辑器,只需键入vim 和希望编辑的文件:vim mongo.sh 如果文件存在,将显示整个内容显示到进行编辑的缓冲区,如果文件不存在,打开一个新的缓冲区进行编辑. 内容未占 ...