爲什麼在正確縮進時此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