为什么这种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以使其更具可读性时（例如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>

渲染更改：

发生了什么事？

---

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

Answer 1

我无法完全解释它，但它与a元素周围的空白有关...

这正确呈现......

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

这不......

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

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

Answer 2

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

Answer 3

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

然而，鲜为人知的是空间所属的元素。

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

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