为什么小空间不断出现在我的网页中？

Question

这可能是一个愚蠢的问题，但如果有更好的或正确的方法来做到这一点，我很乐意学习它。

我已经运行了几次，包括最近，在我的HTML页面的呈现版本中显示小空格。直觉上我认为这些不应该在那里，因为在文本或实体之外，页面的HTML格式不应该重要，但显然它确实如此。

什么，我指的是这样的 - 我有一个从客户端上他们希望他们的网站看一些Photoshop文件。他们希望它看起来基本像素完美的图像在这个文件中。

页面中的一个地方需要一个菜单​​栏，其中每个菜单栏在悬停时进行更改，就像超链接等。在Photoshop文件中，这是一个长条，所以便宜且简单。要做到这一点，只是将该片段拆分为多个图像，然后将它们放在文件中彼此相邻。

所以本能地我躺在出来，像这样（还有更多，但这个是要点）

<a href="page1.html"> 
    <img src="image1.png" /> 
</a> 
<a href="page2.html"> 
    <img src="image2.png" /> 
</a> 
<a href="page3.html"> 
    <img src="image3.png" /> 
</a> 

等等。

问题是图像之间有这个微小的空间，这是不可接受的，因为客户希望这个东西像素完美（它只是简单的看起来很糟糕）。

一个办法让它正确地呈现是去除图像之间的回车

<a href="page1.html"> 
    <img src="image1.png" /> 
</a> 
<a href="page2.html"> 
    <img src="image2.png" /> 
</a> 
<a href="page3.html"> 
    <img src="image3.png" /> 
</a> 

这使得图像去正对着对方（预期的效果），但它使线超长和代码更难以维护（它在这里包裹在SO中，这是一个简化的版本 - 真正的文件名和更长的文件名和JavaScript来做悬停）。

在我看来，这不应该发生，但它看起来像HTML中的回车被渲染为一个小的空白空间。这发生在所有浏览器中，看起来像。

我想对了上面的两个片段应该呈现相同吗？有什么我做错了吗？也许用错误的编码保存文件？我应该将这些链接中的每一个都改为完美定位的CSS元素吗？

Answer 1

空格（包含回车符）通常在所有浏览器中呈现为空格。

你需要把层出不穷的要素之一，但你可以使用一个技巧：

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a> 

这也显得有些丑陋，但它仍然比一个单行更好。您可能会更改格式，但想法是在元素内部添加回车符，而不是在元素之间。

Answer 2

这是HTML规范的一部分 - 空格在标记中，因此它们被认为是文档的一部分。

你有唯一的其他选择，因为你不喜欢的格式，就是要打破html标签：

<a href="..."><img src=".." /></a 
    ><a href="..."><img src=".." /></a 
    ><a href="..."><img src=".." /></a 

这是不可取的在我看来，还是动态创建HTML - 无论是通过JavaScript或使用模板系统和动态html。

Answer 3

我不知道这是否是足够一般为您的网页，但你可以类这些特定一个标签和浮动他们都离开了，那么他们就会帮在一起无论怎样你的HTML被格式化。

<style> 
    a.together { 
     float:left; 
    } 
</style> 

<a class='together' href="page1.html"><img src="image1.png" /></a> 
<a class='together' href="page2.html"><img src="image2.png" /></a> 
<a class='together' href="page3.html"><img src="image3.png" /></a> 

Answer 4

原因很简单：在HTML空白空间中，只有一次。重复的白色空间被忽略，只显示第一个。

避免这种情况的唯一可靠方法就是像您一样，在元素之间不留空白区域。

当基于表格的布局比现在要少时，可以使用零边框和零填充表来对齐元素，同时将它们放在源代码的单独行中。

Answer 5

如果你打算在网站上做一个标签式的界面，那就花很大的力气去正确地做，这将是值得的。有很多网站都有CSS选项卡实现的很好的例子。考虑使用其中之一。

This one有很多CSS + Javascript/AJAX选项卡。或见this set of simple CSS examples（有些风格）。最后，看看这个非常酷的tabs generator。

Answer 6

上面演示的行为是真实的，因为浏览器将回车视为空间。为了解决这个问题，你可以风格它像这样用：

a { display: block; float: left; } 

请注意，上述规则适用于所有的链接，所以你可能要缩小选择到某些元素只，即：

#nav a { display: block; float: left; } 

Answer 7

我处理这个的方式是使用无序列表，并使每个图像/链接成为一个项目。 然后使用CSS内联显示每个项目，然后将它们浮动到左侧。

这会给你更多的灵活性，使标记非常可读。