Felix's Second Life 電腦數碼世界

在中国杨树网设计杨树图片时遇到一个问题，正好在ajaxbbs.net上看到作者提到，抄过来收藏，这个问题是这样的，无论怎么设置边框，在图片的下方都会有一空隙，我的是div包一个IMG
在无忧上看到一个网友问这个问题，偶也比较感兴趣，楼主代码是这样写的：
<div style="width:240px;height:315px;line-height:100%;">
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
</div>

这样看到的效果就是每个图片之间有小段空白。

有朋友贴出解决代码如下：
 
<div style="width:240px;height:315px;line-height:100%;">
<img src="1.gif" border="0" height="56" width="240" /><img src="1.gif" border="0" height="56" width="240" /><img src="1.gif" border="0" height="56" width="240" /><img src="1.gif" border="0" height="56" width="240" /><img src="1.gif" border="0" height="56" width="240" /></div>

即删除每个<img>标记之间的换行符，将所有标记连接在一起，这样问题解决了，但降低了代码的可读性,显然不是一种完美的解决办法。

最后hbjswj大哥给出了一种比较好的办法.全部代码如下：
 
<style>
img {float:left;} /*注意这个地方*/
</style>
<div style="width:240px; height:315px; line-height:100%;">
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
<img src="1.gif" border="0" height="56" width="240" />
</div>

为每个img增加了float:left，这就比较完美的解决了这个问题
本文创作以及使用本文遵守创作共用协议(Creative Commons Attribution 3.0)-署名
原文地址:http://blog.cike.org/2007b/209.shtml