为什么在正确缩进时此HTML呈现不同？

Question

我有一个无序列表，样式为表格导航，需要看起来像这样：。为了让选项卡圆角，每个选项卡都有左，中，右div以及相应的CSS背景*。

---

当我格式化，像这样的列表项（jsFiddle）：

<li class="tab"> 
    <div class="item-wrap"><span class="item-before"></span><span class="item"><a href="inventories">Inventory</a></span><span class="item-after"></span></div> 
</li> 

我得到期望的结果：

但是，当我格式化HTML，以使其更具可读性，像so（jsFiddle）：

<li class="tab"> 
    <div class="item-wrap"> 
    <span class="item-before"></span> 
    <span class="item"> 
     <a href="inventories">Inventory</a> 
    </span> 
    <span class="item-after"></span> 
    </div> 
</li> 

The rendering ch时代：

究竟发生了什么？

---

* 注意：我知道，这种做法已经过时。 class I built this for将我们限制为HTML 4和CSS 2.

Answer 1

浏览器将换行视为空格（如文字空格字符）。

Answer 2

我不能完全解释它，但它与周围的a元素的空白做...

这个正确呈现...

<span class="item"><a href="inventories">Inventory</a></span> 

这不...

<span class="item"> <a href="inventories">Inventory</a> </span> 

因此，重新格式化HTML，引入a元素周围的空白。

Answer 3

HTML将多个空白字符压缩到一个空格中并不是什么秘密。

但是，少知道的是空间属于哪个元素。

考虑这个HTML：<b> <i> spaces!</i></b>

两个空间arond的i元素会凝结，但由此带来的空间在里面呢，还是出去？

这种差异是什么导致您的HTML渲染不同时，你有不同的缩进。

就个人而言，我喜欢用PHP呼应出HTML这样的，所以我可以有它在HTML的来源，但只输出一条线的多个行：

<?php 
echo "<span>" 
    ."Hello, world!" 
    ."</span>"; 
?> 

结果：

<span>Helld, world!</span> 

Answer 4

W3教导我们：

默认情况下，块级元素不是嵌入格式不同元素。通常，块级元素以新行开始，内联 元素没有。有关空白区域，换行符和 数据块格式的信息，请参阅text部分。

而且在引用链接

对于除PRE所有的HTML元素，独立 “字”白空间序列（我们使用术语“字”在这里的意思是“非白序列 空格字符“）。在格式化文本时，用户代理应该识别这些词并根据特定书面语言（脚本）和目标媒体的约定进行布局。

所以基本上，因为你的元素通过内联元素违约，你的标签作为一个“字”的处理，所以你的标签之间的空间呈现的文本时不计数。

基本上，在这一点上，有两件事情你可能不希望：

1. 在一行将所有的代码
2. 使用额外的CSS能够把标签分离线

那么，至少我不想要这个。这就是为什么我使用haml来生成HTML。像许多HTML模板引擎一样，它也是Allows you to handle white spaces between tags without re-indenting your code