img下出现几像素空白的问题

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

 1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 2 <title>Untitled Document</title>
 3 <style type="text/css">
 4 *{padding:0;margin:0;}
 5 ul{width:800px;margin: 20px auto;border:1px dashed #c66;overflow: hidden;}
 6 ul li{list-style: none;float: left;width: 200px;}
 7 ul li img{width: 200px;height: 120px;}
 8 </style>
 9 </head>
10 <body>
11     <ul id="demo1">
12         <li><img src="data:images/1.jpg"></li>
13         <li><img src="data:images/2.jpg"></li>
14         <li><img src="data:images/3.jpg"></li>
15         <li><img src="data:images/4.jpg"></li>
16     </ul>
17 </body>
18 </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与其他元素之间不要有空格也可以解决.

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

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

转载于:https://www.cnblogs.com/MissBean/p/4108778.html

img下出现几像素空白的问题相关推荐

ITK:在不复制内存的情况下为每个像素添加常量
ITK:在不复制内存的情况下为每个像素添加常量内容提要输出结果 C++实现代码内容提要在每个像素上添加一个常量,而无需复制内存(访问器)中的图像. 输出结果 addPixelAccessor. ...
H.266/VVC-VTM代码学习-帧内预测05-Angular模式下计算预测像素值xPredIntraAng
H.266/VVC专栏传送上一篇:H.266/VVC-VTM代码学习-帧内预测04-Planar模式下计算预测像素值xPredIntraPlanar 下一篇:H.266/VVC-VTM代码学习-帧内 ...
短小视频网站sexcms源码安装搭建环境加采集教程有手机和PC演示站 linux下安装一片空白的解决linux下安装一片空白的解决
特别注意:在linux下安装一片空白的解决方法:把index.php的第66行改为require_once sexPATH.'lib/Cs_Sex.php';就行.linux下要注意大小写区分. 电脑 ...
IE下img多余5像素空白
嗯,开场先胡扯几句不相关地感言.最近的工作让我有了很多实践的机会,同时也让我收获颇丰.在群里聊天的时候也提到过,所有的学习过程,最好是理论 -实践-再理论-再实践...的一个循环往复的过程.这里说的理 ...
jQuery easyui中combox 自定义样式去掉下拉框的空白
EasyUI中combox下拉框的默认样式有一大块空白,非常影响美观.使用"panelHeight="auto"属性可以去掉空白: <div style ...
bootstrap table表头错位，火狐浏览器下滚动条挤像素问题解决方案。
首先这篇文章是一个关于bootstrap table的七零八碎各种bug的内容,后续可能会接着更新编辑. 1:前后端分离项目,后端往往要求前端请求后端时,携带着登陆时后端给你的token. boots ...
为什么图片img下方会出现一行空白？
我们在使用inline或inline-block做img图片对齐的时候,通常会发现图片下方有一行空白,这样的空白直接影响我们的显示效果,那么为什么会出现那样的空白呢? 可以看到上图,图片底部就是基线位 ...
小程序之微信小程序下拉上方出现空白
往下拉页面后上方出现空白区域用户需要手动划上去才能消失方法一:"enablePullDownRefresh":false //这个在page.json中配置整个页面都不能滑 ...
linux下SVN不允许空白日志提交
在svn服务端通过hooks在提交时强制要求写日志. 1. 在hooks目录里,复制文件pre-commit.tmpl到pre-commit 2. 修改pre-commit文件,如下. #!/bin/ ...

img下出现几像素空白的问题

img下出现几像素空白的问题相关推荐

最新文章

热门文章