网页图片之间有空隙的解决方法

网页图片之间有空隙的解决办法

前述：一个页面中图片与图片之间出现水平空隙，效果如图

网页图片之间有空隙的解决方法

代码部分如下：

<table width="980" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/top.jpg" width="980" height="90" border="0" usemap="#Map" />
		</td>
	</tr>
</table>

<map name="Map" id="Map">
	<area shape="rect" coords="706,39,742,57" href="common/center.jsp"
		target="main" />
	<area shape="rect" coords="791,44,827,61" href="common/help.jsp" />
	<area shape="rect" coords="875,48,910,66" href="login.jsp" />
</map>

<table width="980" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/top_2.jpg" width="980" height="68" border="0" />
		</td>
	</tr>
</table>

也尝试过<td><img>之间没有任何字符，以及在<img>标签加上 align="bottom"属性的写法，还是不行。最后解决的方法是在<head></head>之间插入img的css

代码如下：

/*设定图片样式，垂直对齐，解决了图片图片之间含有空隙的情况 2011.07.27 added by Lee.will*/
img {
	vertical-align: bottom
}

修复后的效果图：

网页图片之间有空隙的解决方法

1 楼 wulaiyatou 2011-12-02

赞一个。

2 楼 dlb415519095 2012-04-06

赞一个，解决了问题

网页图片之间有空隙的解决方法

相关推荐