內容導覽
▍ 為什麼連續按空白，網頁卻不理你？
你一定碰過這個狀況。
在編輯器裡連按了好幾次空白鍵，發布後網頁上卻只留下一個空格。
這不是網站壞掉，這是 HTML 的預設機制：空白折疊（Whitespace Collapsing）。
瀏覽器會自動把連續的空白字元（包含空格、Tab、換行）壓縮成單一空格。
• 原始碼效果：
HTML 碼：你好 世界（手動打 5 個空格）
實際呈現：你好 世界（只剩 1 個空格）
想要精準掌控網頁間距，你必須改用「HTML 空格實體」。
▍ 常用 HTML 空格實體一覽
| 實體名稱 | 實體編碼 | 說明 | 寬度 |
|---|---|---|---|
|   | 不換行空格（No-Break Space） | 約 1/4 em，隨字體變動 |
  |   | 半形空格（En Space） | 1/2 em（固定寬度） |
  |   | 全形空格（Em Space） | 1 em（固定一個中文字寬） |
  |   | 窄空格（Thin Space） | 約 1/6 em |
▍ 1. ：不換行空格，電商最愛
這是網頁最常見的空格。全名為 No-Break Space，具備兩個關鍵物理特性：
• 可以重複累加：打幾個，網頁就呈現幾個空格。
• 強迫內容不折行：被它連接的文字，絕不會在換行時被拆開。
實務情境：在價格 NT$ 1,200 之間使用它，能確保金額數字與貨幣單位永遠緊貼在一起，不會因為螢幕寬度不夠而被迫斷行。
<p>價格：NT 1,200</p>
<p>日期：2026 年 12 月 11 日</p>▍ 2.  ：固定半形空格
寬度固定為 1/2 em（em 為當前字體大小）。它不受字型風格干擾，非常適合用在需要精準、微小對齊的表單欄位。
<!-- 效果：A B C D -->
<p>A B C D</p>▍ 3.  ：全形縮排首選
寬度固定為 1 em，剛好等同於一個中文字的寬度。
不需要寫複雜的 CSS 設定，直接在中文文章段落開頭打上兩個  ，就能精準實現首行縮排兩格的效果。
<p>  這是首行完美縮排兩個中文字的實際效果。</p>▍ 4.  ：極細窄空格
寬度僅有 1/6 em。適合置入於數字與百分比、單位或括號之間，提供極微小的視覺透氣感，是讓排版質感翻倍的進階細節。
<!-- 效果：100 % 閱讀體驗比 100% 更加透氣 -->
<p>達成率 100 %</p>▍ 換行標籤 <br>：何時用？何時躲？
<br> 是強制換行標籤。它純粹是視覺上的斷行，不會產生額外的段落間距。
最適合用於：地址、詩句、聯絡資訊等需要保留排版結構的緊密內容。
<p>
曜輝工作室<br>
台北市信義區某某路 123 號<br>
contact@yaohui.studio
</p>關鍵區隔：千萬不要用連續的 <br><br> 來拉開段落距離。那是 <p> 標籤的工作。濫用 <br> 會破壞網頁的語意結構，對 SEO 非常不友善。
| 比較項目 | <br> 換行 | <p> 段落 |
|---|---|---|
| 間距 | 無額外間距，文字緊貼下一行 | 段落前後有預設外距（margin） |
| 網頁語意 | 純視覺換行，無結構意義 | 表示一個完整的主題段落 |
| SEO 影響 | 無直接影響 | 幫助搜尋引擎理解內容層級 |
▍ 進階技巧：用 CSS 一口氣搞定複雜空格
如果你手上有大篇幅的文字（例如程式碼、詩歌或合約條款），不想逐字輸入空格實體，可以使用 CSS 的 white-space 屬性。
/* 1. 保留所有原本的空白與換行，且超出寬度不換行 */
.preserve-space {
white-space: pre;
}
/* 2. 保留所有原本的空白與換行，但超出寬度時自動換行 */
.preserve-wrap {
white-space: pre-wrap;
}
/* 3. 強制所有文字在同一行，直到遇到 <br> 才換行 */
.no-wrap {
white-space: nowrap;
}▍ 常見問題與解答
Q：為什麼我打很多空白，網頁上只顯現一個？
A：因為瀏覽器預設會執行「空白折疊（Whitespace Collapsing）」機制，將連續的空白、Tab 和換行壓縮成單一空格。想在網頁上顯示多個空格，必須使用 HTML 空格實體，例如最常見的 。
Q：首行縮排最推薦用哪種空白？
A：最推薦使用全形空格  。它的寬度固定為 1 em（等同於一個中文字的寬度），只要輸入兩個   就能完美實現中文文章開頭縮排兩格的效果。
Q：可以用多個 <br> 來拉開段落間距嗎？
A：不建議這樣做。<br> 的語意是強制換行，而非分隔段落。建議使用 <p> 段落標籤，並透過 CSS 的 margin 屬性來控制段落間距，避免破壞網頁結構並影響 SEO。
