css消除图片下方空隙

今天在做一个网页时，在IE7下发现一个奇怪的问题，先看代码：

<div style="float: left;">
	<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;" 
		width="553" height="179" />
</div>

 感觉代码没问题，可是预览时总是发现图片下方和div边框之间有一条大概4px的空隙，最后还是得以解决。

最简单的办法是，标签写在一行中：

<div style="width: 900px;height: 75px;margin-top: 0px;"><img src="images/top.jpg" id="top" width="900" height="75"></div>

 

其他办法主要还是靠css属性解决! 不过，有些属性调整后在firefox下可能会有问题。一个可以使用display属性解决：

<div style="float: left;">
	<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;display:block;" 
		width="553" height="179" />
</div>

 

另一个可以用vertical-align属性解决：

<div style="float: left;">
	<img id="pic1" src="images/picture1.jpg" style="border:4px solid #191919;vertical-align:top;" 
		width="553" height="179" />
</div>

  使用margin-bottom属性解决：

<div style="width: 900px;height: 75px;margin-top: 0px;">
	<img src="images/top.jpg" style="margin-bottom: -4px;" id="top" width="900" height="75">
</div>

 使用字体大小属性font-size解决：

<div style="width: 900px;height: 75px;margin-top: 0px;font-size:0">
	<img src="images/top.jpg" id="top" width="900" height="75">
</div>