img下出现几像素空白的问题
先看一个例子和效果,应该就会明白我的问题了。
<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下出现几像素空白的问题的更多相关文章
- div内的img下出现几像素的空白间距解决办法
现象描述: 解决方法: 1.设父元素的font-size:0; 2.设img为display:block; 3.设img为vertical-align:middle;
- IE6下最小19px像素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 小程序之 微信小程序下拉上方出现空白
往下拉页面后上方出现空白区域 用户需要手动划上去才能消失 方法一:"enablePullDownRefresh":false //这个在page.json中配置 整个页面都不能滑 ...
- Lodop打印控件 打印‘接下一页’‘以下空白’
Lodop打印控件中,超文本超过设置的打印项高度 或超过纸张,就会自动分页,纯文本通过设置为多页项也可以根据打印项高度自动分页,Lodop中还提供了许多手动分页的方法,对于多页文档中(自动分页或手动分 ...
- React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)
摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...
- [兴趣使然]用python在命令行下画jandan像素超载鸡
下午刷煎蛋的时候看到 Dthalo 蛋友发的系列像素超载鸡,就想自己试试用python脚本画一个,老男孩视频里的作业真没兴趣,弄不好吧没意思,往好了写,自己控制不好,能力不够. 所以还是找自己有兴趣的 ...
- <s:select>下拉框是空白的解决办法
首先,定义了一个Department的JavaBean对象如下 DAO.java 在一个Action类Employee.java中将depts放入requestMap中 最后,在index.jsp里定 ...
- sublime text 按下Ctrl + B 显示空白的解决办法
环境:windows xp , sublime text 2 条件:环境变量也已经设置好,可是无论怎么编译都是空白,如图: 于是鄙人百度之,发现不少网友都有这样的问题,但是网上给出的的解决方案千篇一律 ...
- Vue项目之IE下打开页面是空白
原因是:Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Sym ...
随机推荐
- C#注册表操作,根据键取值
string into = ""; RegistryKey key = Registry.LocalMachine; RegistryKey myreg = key.OpenSub ...
- 从Unity学UE(一)之蓝图类的使用----制作一个可控灯光
转自:http://blog.csdn.net/u011707076/article/details/44171829 首先申明,本文章内容适合有Unity引擎基础的童鞋享用,如果不了解Unity引擎 ...
- Cheatsheet: 2013 07.21 ~ 07.31
Mobile Android vs. iOS: Comparing the Development Process of the GQueues Mobile Apps Android Studio ...
- sql 执行计划
SQL Server执行计划的理解 要理解执行计划,怎么也得先理解,那各种各样的名词吧.鉴于自己还不是很了解.本文打算作为只写懂的,不懂的懂了才写. 在开头要先说明,第一次看执行计划要注意,SQL S ...
- C# WPF MVVM 实战 – 5- 用绑定,通过 VM 设置 View 的控件焦点
本文介绍在 MVVM 中,如何用 ViewModel 控制焦点. 这焦点设置个东西嘛,有些争论.就是到底要不要用 ViewModel 来控制视图的键盘输入焦点.这里不讨论,假设你就是要通过 VM,设置 ...
- HDU 5833 Zhu and 772002
HDU 5833 Zhu and 772002 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...
- HTTP协议(转自:小坦克博客)
原文地址:http://www.cnblogs.com/TankXiao/archive/2012/02/13/2342672.html HTTP协议详解 当今web程序的开发技术真是百家争鸣,ASP ...
- Codeforces Round #286 (Div. 2) B. Mr. Kitayuta's Colorful Graph dfs
B. Mr. Kitayuta's Colorful Graph time limit per test 1 second memory limit per test 256 megabytes in ...
- ASP.NET常用正则表达式
验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证 ...
- js简介、基本语法、类型转换、变量、运算符、分支语句、循环语句、函数、函数调用
javascript是个脚本语言,需要有宿主文件,他的宿主文件是html文件. 三个常用对话框 alert("")警告对话框,弹出一个警告对话框 <script> al ...