實用！在HTML插入空白的6種方式 - April Yang

編輯HTML時，如果遇到需要連續空白、被強制輸入東西或排版不整齊的狀況，善用空格符號可以解決問題。

 、  和  是三個常見的空格符號，其中 ... 跳至內容區 首頁 關於我 所有文章(未分類) ComputerScience CloudComputing FeedbackandOther OperationResearch 想找什麼嗎？ 搜尋： 零基礎學雲端運算、AWS本日熱門文章實用！在HTML插入空白的6種方式[技巧]自動調整視窗大小、提高解析度......小技巧讓VirtualBox虛擬機更好用Excel規劃求解—找最佳解的好幫手Gmail批次寄信：如何寄送大量客製化信件、附件？[C++]用C++寫一個簡單的射擊遊戲10秒鐘取得「網頁長截圖」快速保留完整網頁畫面不求人！(Chrome和Edge皆適用)近期關心內容訂閱April的最新文章 輸入電子郵件地址以關注本網站(AprilYang)，並透過電子郵件接收最新的文章消息。

你隨時可以取消訂閱，開啟任何一封本網站寄給你的信，點擊「取消訂閱」即可完成。

電子郵件地址： 我想看新文章！ 聯絡信箱 [email protected] 網站瀏覽量 142,336 空格符號在HTML中是特殊符號，這篇文章介紹HTML提供的六種寬度不同的空格，及其使用時機與方式。

目錄 快速索引 使用時機 詳細說明與範例 1.   2.   3.  4.   5.‌  6.‍ 補充一：斷行標籤
與 補充二：其他留空白或換行的方式 補充三：HTMLEntities 總結 參考資料 快速索引 空格符號效果 按空白鍵產生的空格(最常用) 半形空格，個中文字寬 全形空格，1個中文字寬  窄空格，約個中文字寬‌零寬度，用於切開兩個字元‍零寬度，用於產生連字效果 使用時機 以HTML編輯網頁，尤其在WordPress寫文章或排版，常常遇到： 1.需要連續輸入空格，但多次按了空白鍵後，網頁卻只顯示一個空格。

2.明明某個地方不想要輸入內容，系統卻強制規定一定要輸入東西。

3.排版時，文字不整齊，左右多或少一些距離。

針對上述三種情況，空格符號便派上用場。

詳細說明與範例 1.  no-breakspace，不換行空格，這是最常使用的空格，也是按下空白鍵產生的空格。

連續輸入 會產生累加空格的效果(其他的空白符號也會)，不過該空格佔據的寬度會明顯受到字體的影響。

這種空格符號的另一個用途是禁止自動換行，HTML頁面一般會將自動換行放在空格的地方，但是有些文字內容的排版不適被放在連續一行的行尾和下一行的行首，例如描述時間的「10 PM」，10和PM中間不適合分開，此時可以在編輯器中在10和PM的中間打上 ，而非按空白鍵，避免10和PM被分開，更多相關資料請參考維基百科。

在HTML中編輯

 是最常用的空格
 寬度是按空白鍵的大小
  但&nbsp寬度不固定;

呈現在螢幕上的內容  是最常用的空格  寬度是按空白鍵的大小   但&nbsp寬度不固定; 2.  enspace，en是字體排印的一個計量單位，寬度是字體寬度的一半，例如使用16點(16px)字體時， 的寬度就是8點，約佔個中文字寬度。

在HTML中編輯

 的寬度只有中文字的一半
 這列有一個 
   兩個 和一個中文字同寬

呈現在螢幕上的內容  的寬度只有中文字的一半  這列有一個     兩個 和一個中文字同寬 3.  emspace，em是一個字元的寬度，1em在16點字體時的寬度就是16點，此寬度是en的兩倍，約等於1個中文字寬。

在HTML中編輯

 的寬度和一個中文字一樣
 這列有一個 
  段落開頭可用這個空兩格

呈現在螢幕上的內容  的寬度和一個中文字一樣  這列有一個    段落開頭可用這個空兩格 4.  thinspace，不常用，寬度約是em或em寬。

在HTML中編輯

通常不會有人使用 
 好奇還是試一下
     五個 和一中文字同寬

呈現在螢幕上的內容 通常不會有人使用   好奇還是試一下      五個 和一中文字同寬 5.‌ zerowidthnonjointer，zerowidth表示零寬度，螢幕上看不見空白。

使用螢幕顯示文字時，有時系統會誤將兩個不應連字的字元連在一起，這種空白符可以抑制這種狀況發生，相關範例請參考維基百科。

6.‍ zerowidthjointer，同樣零寬度。

有些語言，如阿拉伯語或印度語，兩個字元間常需要連字，使用這種空白符號，可以讓兩個本來沒有連在一起的字產生連字效果，相關範例請參考維基百科。

補充一：斷行標籤
與
除了空格符號，斷行標籤
或
也非常實用，br是英文有中斷換行之意的break的縮寫。

平常在WordPress打文章，按Enter鍵，會自動換到新的一段，但有時候只是想要換行，不想要換到新的一段，或者想要換行，但系統不讓人換行時，在想斷行的地方加上
或
就可以解決這個問題，不過要注意不能把反斜線寫在前面，變成，雖然WordPress編輯器似乎會把認定為斷行標籤，可是事實上反斜線在br前面是不正確的用法。

補充二：記 或
什麼的太麻煩了，有還沒有其他留空白或換行方法？ 有，HTML還有另一個

標籤，
標籤區域內的文字，會按照使用者原本的編排方式呈現，不會自動刪減重複的空格和
。








在HTML中編輯



<pre>會如實呈現按下的空白
像這列中間有三個空白

前面不加<br>也可以換行








呈現在螢幕上的內容



會如實呈現按下的空白
像這列中間有三個空白

前面不加
也可以換行







如果是在WordPress編輯器上寫作，系統在「內容區塊」提供「未格式化文字」，使用效果和用
標籤把特別編排的文字包圍起來一樣。













補充三：HTMLEntities



這篇文章用特殊「符號」或空格「符號」稱呼可以達到空格效果的一串編碼，但其實這些東西屬於HTMLEntities，只是為了方便解釋，在此稱呼為符號。





HTMLEntities是什麼？



寫文章的常常會使用到「空白」、「>」、「