img下出现几像素空白的问题
2024-10-01 06:11:23
先看一个例子和效果,应该就会明白我的问题了。
<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与其他元素之间不要有空格也可以解决.
熟能生巧,不知道原因,先记住,再理解。
每天进步一点点,努力超越昨天的自己。
最新文章
- 一次sql注入中转
- 使用dwr时动态生成table的一个小技巧
- C#微信开发小白成长教程二(新手接入指南,附视频)
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式
- ImportError: No module named MySQLdb
- C语言 链表的创建--打印--逆置--新增--删除--排序--释放
- 【Unity Shaders】学习笔记——SurfaceShader(十)镜面反射
- 2天驾驭DIV+CSS (技巧篇)(转)
- C盘瘦身,可以让你的电脑C盘恢复到刚安装时的大小
- varchar(n)和varchar(max)有什么区别
- LeetCode_ Merge k Sorted Lists
- CSS检测的高像素密度屏幕设备
- 【项目笔记】拿宽高前measure(widthMeasureSpec, heightMeasureSpec)的使用技巧
- 【iOS】7.4 定位服务->;2.1.4 定位 - 官方框架CoreLocation 案例:指南针效果
- .NET Core微服务之基于Steeltoe使用Zipkin实现分布式追踪
- [bzoj4771] 七彩树
- SharePoint 2010 查看dll的PublicKeyToken值方法
- delphi中ini 文件操作记要(1): 使用 TIniFile
- AS3.0:给图片添加滤镜模糊与斜角效果
- InputSream转为String
热门文章
- LKDBHelper小细节
- 【leetcode❤python】206. Reverse Linked List
- c++ 动态分配二维数组 new 二维数组
- .Net需要掌握的知识
- Myeclipse 10.7 android(安卓) 开发环境搭建
- 6.Type and Member Basics
- Codeforces Round #281 (Div. 2) C. Vasya and Basketball 二分
- CSS笔记(三)背景
- C#正则表达式编程(一):C#中有关正则的类
- LTE Module User Documentation(翻译3)——仿真输出