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

解决网页布局中图片与元素间出现的空白问题

最新推荐文章于 2021-05-08 22:35:38 发布

weixin_30340819

最新推荐文章于 2021-05-08 22:35:38 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MissBean/p/4108778.html

本文详细介绍了如何解决网页布局中图片与下面元素出现的几像素空白问题，包括将img元素块状化、左浮动、设置样式、添加父级元素高度或使用特定CSS属性等方法，并提供了相关代码示例。

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

 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="images/1.jpg"></li>
13         <li><img src="images/2.jpg"></li>
14         <li><img src="images/3.jpg"></li>
15         <li><img src="images/4.jpg"></li>
16     </ul>
17 </body>
18 </html>