HTML 段落 p：內文的標準寫法與常見錯誤

<p> 常用來表示整篇文章的內文或摘要，是內文最基本的容器。要注意瀏覽器會把多餘的空白與換行合併成一個空格，段落裡也只能放行內內容；想加大段落之間的間距請用 CSS 的 margin，不要塞空段落。

<p>第一個段落</p>
<p>第二個段落</p>

它是區塊層級元素，前後會自動換行，瀏覽器也預設帶有上下間距。

空白與換行會被合併

在原始碼中排版用的空白、tab 與換行，瀏覽器都會壓縮成一個空白：

<p>
  這一段
  在原始碼中換了行，
  顯示出來卻是同一行。
</p>

要在段落中強制斷行，請用 換行 <br>；要調整段落之間的距離，請用 CSS 的 margin。

<!-- ❌ 用空段落撐出間距 -->
<p>第一段</p>
<p></p>
<p></p>
<p>第二段</p>

<!-- ✅ 間距交給 CSS -->
<p class="mb-8">第一段</p>
<p>第二段</p>

段落裡只能放行內內容

<p> 只能包 行內內容，例如：文字、超連結、圖片、<strong>、<em> 等。放進 <div> 這類區塊元素時，瀏覽器會自動把段落提前結束：

<!-- ❌ 瀏覽器會在 div 之前自動關閉 p，結構跟你想的不一樣 -->
<p>文字 <div>區塊</div></p>

<!-- ✅ 行內元素沒問題 -->
<p>這是一段文字，其中有 <a href="/html/what-is-html">連結</a> 與 <strong>強調</strong>。</p>

小提醒

<p> 的結束標籤在某些情況下可以省略，但為了讓 巢狀結構 清楚易讀，請一律完整寫上。

常見問題

為什麼原始碼裡的空白與換行沒有顯示出來？

HTML 會把連續的空白、tab 與換行合併成一個空白。想在段落中強制斷行請用 <br>，想要空一段距離請用 CSS 的 margin 或 padding。

段落裡可以放 div 嗎？

不行。<p> 只能放行內內容，放進 <div> 這類區塊元素時，瀏覽器會自動把段落提前結束，產生與你預期不同的結構。要包區塊請改用 <div> 或 語意化元素。

想讓兩段之間更寬，可以多加幾個空的 p 嗎？

不建議。空段落對機器來說是沒有內容的段落，會干擾文件結構。間距是外觀問題，交給 CSS 的 margin 處理才對。

延伸閱讀

標題 <h1>~<h6>換行 <br>行內容器 <span>超連結 <a>