HTML 空白折疊（Whitespace Collapsing）說明文件

1. 問題說明

當 AI 產生 HTML 程式碼時，經常會在 <p> 或 <div> 元素內部進行換行與縮排。
這些換行是為了讓「開發者閱讀原始碼」更清楚，但並不會在瀏覽器中真正產生換行效果。

2. 範例

原始 HTML 程式碼

<p>
    這是一段文字，
    只是為了讓程式碼好讀，
    所以在這裡換行。
</p>

瀏覽器實際顯示結果

可以看到，瀏覽器會把多個空白、縮排與換行折疊成「一個空白」。

3. 為什麼會這樣？

在一般 HTML 元素（例如 <p>、<div>）中，瀏覽器會自動進行「空白折疊」：

• 多個空白會變成 1 個空白
• Tab 會被視為空白
• 換行（newline）會被視為空白

4. 如何真正換行？

方法一：使用 <br>

<p>
第一行<br>
第二行
</p>

方法二：使用 CSS white-space

p {
    white-space: pre-line;
}

常見 white-space 屬性值：

• normal（預設）：折疊空白
• pre：保留所有空白與換行
• pre-line：折疊空白，但保留換行

方法三：使用 <pre> 元素

<pre>
這裡的換行
會真的保留
</pre>

這裡的換行
會真的保留

5. 總結

HTML 負責「結構」，CSS 負責「呈現」。在一般元素中，換行只是給開發者閱讀用的排版，瀏覽器會自動將其折疊為一個空白。若需要真正的換行效果，必須使用 <br>、white-space 屬性或 <pre> 元素。