先看一个例子和效果，应该就会明白我的问题了。

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Untitled Document</title>

 <style type="text/css">

 *{padding:0;margin:0;}

 ul{width:800px;margin: 20px auto;border:1px dashed #c66;overflow: hidden;}

 ul li{list-style: none;float: left;width: 200px;}

 ul li img{width: 200px;height: 120px;}

 </style>

 </head>

 <body>

     <ul id="demo1">

         <li><img src="data:images/1.jpg"></li>

         <li><img src="data:images/2.jpg"></li>

         <li><img src="data:images/3.jpg"></li>

         <li><img src="data:images/4.jpg"></li>

     </ul>

 </body>

 </html>

运行后页面效果如下：

图片和下面出现了几像素的空白。具体什么原因我现在还不知道。有朋友说是因为img不是块状元素，有说是IE 3px问题。先记住下解决方法：

1.将img块状化   ul li img{display:block;}

2.将img左浮动   ul li img{float:left;}

3.为img添加样式 ul li img{vertical-align:top|bottom|text-top|text-bottom;}

4.为img的父级加高度 ul li{height:120px;}

5.为img的父级加样式 ul li{font-size:0;}

img与其他元素之间不要有空格也可以解决.

熟能生巧，不知道原因，先记住，再理解。

每天进步一点点，努力超越昨天的自己。

img下出现几像素空白的问题的更多相关文章

  1. div内的img下出现几像素的空白间距解决办法

    现象描述: 解决方法: 1.设父元素的font-size:0; 2.设img为display:block; 3.设img为vertical-align:middle;

  2. IE6下最小19px像素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 小程序之 微信小程序下拉上方出现空白

    往下拉页面后上方出现空白区域  用户需要手动划上去才能消失 方法一:"enablePullDownRefresh":false //这个在page.json中配置 整个页面都不能滑 ...

  4. Lodop打印控件 打印‘接下一页’‘以下空白’

    Lodop打印控件中,超文本超过设置的打印项高度 或超过纸张,就会自动分页,纯文本通过设置为多页项也可以根据打印项高度自动分页,Lodop中还提供了许多手动分页的方法,对于多页文档中(自动分页或手动分 ...

  5. React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  6. [兴趣使然]用python在命令行下画jandan像素超载鸡

    下午刷煎蛋的时候看到 Dthalo 蛋友发的系列像素超载鸡,就想自己试试用python脚本画一个,老男孩视频里的作业真没兴趣,弄不好吧没意思,往好了写,自己控制不好,能力不够. 所以还是找自己有兴趣的 ...

  7. <s:select>下拉框是空白的解决办法

    首先,定义了一个Department的JavaBean对象如下 DAO.java 在一个Action类Employee.java中将depts放入requestMap中 最后,在index.jsp里定 ...

  8. sublime text 按下Ctrl + B 显示空白的解决办法

    环境:windows xp , sublime text 2 条件:环境变量也已经设置好,可是无论怎么编译都是空白,如图: 于是鄙人百度之,发现不少网友都有这样的问题,但是网上给出的的解决方案千篇一律 ...

  9. Vue项目之IE下打开页面是空白

    原因是:Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Sym ...

随机推荐

  1. jQuerySchool

    jQUery

  2. CodeForces 148B Escape

    Escape Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  3. 各种编码中汉字所占字节数；中文字符集编码Unicode ,gb2312 , cp936 ,GBK，GB18030

    vim settings set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936,latin1set termencoding=utf-8se ...

  4. MySQL性能优化的21个最佳实践 和 mysql使用索引

    1. 为查询缓存优化查询 当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存中,这样,后续的相同的查询就不用操作表而直接访问缓存结果了. 2. EXPLAIN   SELECT 查询 ...

  5. Java构建工具：如何用Maven，Gradle和Ant+Ivy进行依赖管理

    原文来自:https://zeroturnaround.com/rebellabs/java-build-tools-how-dependency-management-works-with-mave ...

  6. Mybatis+SpringMVC+Spring整合

    1,先添加spring支持: applicationContext.xml  配在WEBINF下,四个命名空间:aop,context,tx,p 配Listener:ContextLoaderList ...

  7. XML详解：第三部分 XML解析

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 【T-SQL系列】常用函数—聚合函数

    聚合函数平均值AVG.标准偏差STDEV.方差VAR.最大值MAX.最小值MIN.合计SUM.次数COUNT.极差值MAX-MIN.变异系数STDEV/AVG*100 什么是统计统计 就是通过样本特性 ...

  9. asp.net MVC开发过程中，使用到的方法（内置方法及使用说明）

    ® 视图的返回使用案例: [HttpGet] [SupportFilter] public ActionResult UserTopic(string type, string TopPicId, s ...

  10. iOS - UIStoryboard

    前言 NS_CLASS_AVAILABLE_IOS(5_0) @interface UIStoryboard : NSObject @available(iOS 5.0, *) public clas ...