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

 <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. 高通平台 lcd driver 调试小结

    一.概述 1.1 简介 本文档主要包括LCD模块的驱动流程分析.Framebuffer相关知识.Gralloc等相关内容,以及LCD调试的一些经验和相关bug的分析和讲解. 1.2  开发环境 And ...

  2. 高通安卓调试LCD几方面总结

    来公司上班现在已经整整一个月了,蔽人不才,能力有限,学习进度缓慢,不过也是有一点点的收获与心得,在这里写出来与大家分享,养成良好的记录习惯也免得后忘记. 不啰嗦了,开入正题.来公司一个月左右的时间,主 ...

  3. 关于HTML5与移动开发

    OSChina API列表: android api:http://tool.oschina.net/apidocs AppCan移动开发平台:http://doc.appcan.cn/#!/guid ...

  4. luabind 导出string问题

    luabind导出字符串 不能导出char* 会有问题 应该是字符串连接的时候出错了 static _TCHAR* pRetChar = new _TCHAR[10]; memcpy(pRetChar ...

  5. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...

  6. CentOS6.4_x86_开关机查看

    1. 有时候,开机进系统的时候,就会卡在哪里,进不去系统.查看开机时 是哪个东西卡在哪里: 开机,显示进度条的时候,按 F4,就可以看到加载的具体情况了. 2. 关机的时候,有时候关闭了机: 用 CT ...

  7. [转载] C++ STL string的Copy-On-Write技术

    原文: http://coolshell.cn/articles/12199.html stl的string是经过严格优化的, 深入理解对以后编程过程中应用string非常有益处, 感谢左耳朵耗子的精 ...

  8. mysql 查询执行的流程

    1.客户端发送一个请求给服务器.2.服务器先检查查询缓存,命中了缓存,直接返回缓存中的数据,否则进入下一个阶段.3.服务器进行sql解析,预处理,再由优化器生成对应的执行计划.4.mysql根据执行计 ...

  9. spring 好处与优点

    使用Spring有什么好处?(1)Spring能有效地组织你的中间层对象.(2)Spring能消除在许多工程中常见的对Singleton的过多使用.(3)Spring能消除各种各样自定义格式的属性文件 ...

  10. z-index总结【转载http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html】

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...