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

 <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. sysbench 0.5 oltp测试笔记

    sysbench 0.5相比0.4版本的主要变化是,oltp测试结合了lua脚本,不需要修改源码,通过自定义lua脚本就可以实现不同业务类型的测试.同时0.5相比0.4需要消耗更多的cpu资源. 1. ...

  2. SqlSever基础 getdate函数 返回系统当前的年月日,时分秒 毫秒

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  4. iOS开发Extra系列:NSString***

    在iOS系统,NSString可能是最常用的对象,很多用法跟其他语言不一样. 字符串对象NSString 使用格式创建字符串 1 2 3 4 5 + (id)stringWithFormat:(NSS ...

  5. centos 扩展root根分区的大小

    目标:将VolGroup-lv_home缩小到125G,并将剩余的空间添加给VolGroup-lv_root 1.首先查看磁盘使用情况[root@localhost ~]# df -h文件系统     ...

  6. [POJ3667]Hotel(线段树,区间合并)

    题目链接:http://poj.org/problem?id=3667 题意:有一个hotel有n间房子,现在有2种操作: 1 a,check in,表示入住.需要a间连续的房子.返回尽量靠左的房间编 ...

  7. servlet&jsp高级:第二部分

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

  8. Javascript获取地址栏参数值

    采用正则表达式获取地址栏参数: function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +&q ...

  9. Codeforces Round #379 (Div. 2) E. Anton and Tree 树的直径

    E. Anton and Tree time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...

  10. phpStorm快捷键

    1.快速寻找方法,变量定义处:ctrl + b或者ctrl+单击 2. 移动视图,方便快捷的移动代码窗口: ctrl + up, down 3. 代码方法间快速跳转:alt + up, down