[HTML]

(Phrasing元素)放入div或block元素會分割成兩塊

有時候在畫面上看到一段 HTML 明明只寫了一個 p，但開發者工具打開卻變成兩段，排版還會莫名多出空白。這類問題很多時候不是 CSS，而是 HTML 結構本身就不合法。

這篇整理一下為什麼把 div 這類 block 元素塞進 p 裡面，瀏覽器會自動把它拆開。

先理解 p 的限制

<p> 不是萬用容器，它的內容模型有限制，只能放屬於 phrasing content 的元素。像文字、span、a、strong、img 這類通常沒問題，但 div、section 這種 block 層級元素就不行。

瀏覽器會怎麼修正

假設你寫了這段：

1

<p>文字開始 <div>不允許的 block</div> 文字結尾</p>

瀏覽器通常不會照字面硬吃，而是會幫你修正成近似下面的結果：

1
2
3

<p>文字開始</p>
<div>不允許的 block</div>
<p>文字結尾</p>

也就是說，p 會在遇到 block 元素時自動關閉，後面的內容甚至可能被重新包成另一個段落。

為什麼這件事重要

這不只是標記語法潔癖，而是真的會影響：

1. CSS 選擇器命中結果。
2. 段落間距與排版。
3. JavaScript 取得 DOM 結構的結果。
4. HTML 驗證與可維護性。

所以如果你看到畫面結構和你手寫的原始碼不一樣，先懷疑內容模型是否合法，通常很有幫助。

常見誤解

1. 瀏覽器會原封不動保留我的 HTML

不一定。瀏覽器會盡量把不合法的 HTML 修成可解析的 DOM，這就是為什麼你看到的最終結構可能和原始碼不同。

2. p 可以當成一般容器使用

這是最常見的誤會。p 是段落語意元素，不適合拿來包複雜區塊。

正確做法

如果你要包的是整個區塊，直接用 div 或 section；如果只是純文字段落，再用 p。不要反過來把 block 元素塞進 p 裡面。

小結

<p> 只能容納 phrasing content，放進 div 這類 block 元素時，瀏覽器會自動幫你拆段。遇到 DOM 結構被分成兩塊、排版不如預期時，先回頭看 HTML 內容模型，通常比一直調 CSS 更快找到根因。