令人费解的空格

Zao's Blog

感谢上天，我不是一个人在战斗！

十一月

令人费解的空格

标签:css, 网页设计 | 浏览:(0)

可能你已经注意到了，无论怎么调整你的css，网页的表现和你的想象总是有所不同，比如间距、宽度。现在我说说间距。也许你不知道，网页中有些莫名其妙的间距并不是css写得不正确所致，而是HTML代码中的空格惹的祸！

下面是一个测试网页（测试一）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TEST</title>
<style type="text/css"><!--
div {padding:0;border:1px solid #f00;}
img {border:0;margin:0;width:100px;height:100px;}
-->
</style>
</head>
<body>
<div>
<img src="test.gif" alt="test" />
<img src="test.gif" alt="test" />
</div>
</body>
</html>

你会发现，尽管你在css中已经设置无间距，但在三大主流浏览器IE、FireFox、Opera中依然会出现间距。

下面我们分别定义：
图片和div顶部的间距＝上；图片和div左边间距＝左；图片之间间距＝内；图片和div底部的间距＝下。
有间距＝1；无间距＝0。
浏览器：IE6和IE7；FireFox2.0.0.9；Opera9.23

用上面的代码测试时，得到结果如下：
IE：上＝0；左＝0；内＝1；下＝1
FireFox：同IE
Opera：上＝0；左＝0；内＝1；下＝0

换一下代码（测试二）：

<div>
<img src="test.gif" alt="test" />
<img src="test.gif" alt="test" /></div>

结果：
同测试一。

再改变代码（测试三）：

<div>
<img src="test.gif" alt="test" /><img src="test.gif" alt="test" />
</div>

结果：
IE：上＝0；左＝0；内＝0；下＝1
FireFox：均为0
Opera：同FireFox

再改变代码（测试四）：

<div>
<img src="test.gif" alt="test" /><img src="test.gif" alt="test" /></div>

结果：
三大浏览器均为0

结论：
<div>和<img>之间的空格三大浏览器均忽略。<img>和<img>之间的空格三大浏览器均显示。<img>和</div>之间的空格只有IE显示。
那为什么测试二中，IE和FireFox均有下间距呢？这是因为两个img之间有空格，空格是一种字符，在FF和IE中默认字符和图像是不在同一底线的！而Opera则在同一底线，所以会看到这种结果。

解决：
网页中有图像代码时，注意去掉这些多余的空格、换行符（尽管这似乎不利于对代码的阅读）。据我观察，这些多余的空格似乎只有当网页中有图像代码时才表现出来。