使DIV图片之间不产生空白距离
九月 21, 2007, Posted by cike at 2:04 下午
在中国杨树网设计杨树图片时遇到一个问题，正好在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>
<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 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;} /*注意这个地方*/
</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，这就比较完美的解决了这个问题
20080831更新的：以上是07年9月实践中查阅资料总结，针对本例现在再补两种做法
img{vertical-align:bottom}
或
img{display:block}
或
img{display:block}
非常感谢,问题解决了,豁然开朗!