空格符號在HTML中是特殊符號，這篇文章介紹HTML提供的六種寬度不同的空格，及其使用時機與方式。

目錄

快速索引

使用時機

詳細說明與範例

1.  

2.  

3.  

4.  

5. ‌

6. ‍

補充一：斷行標籤
與

補充二：其他留空白或換行的方式

補充三：HTML Entities

總結

參考資料

快速索引

空格符號效果 按空白鍵產生的空格 (最常用) 半形空格， 個中文字寬 全形空格， 1 個中文字寬  窄空格，約 個中文字寬‌零寬度，用於切開兩個字元‍零寬度，用於產生連字效果

使用時機

以HTML編輯網頁，尤其在WordPress寫文章或排版，常常遇到：

1. 需要連續輸入空格，但多次按了空白鍵後，網頁卻只顯示一個空格。2. 明明某個地方不想要輸入內容，系統卻強制規定一定要輸入東西。3. 排版時，文字不整齊，左右多或少一些距離。

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

詳細說明與範例

1.  

no-break space，不換行空格，這是最常使用的空格，也是按下空白鍵產生的空格。連續輸入   會產生累加空格的效果 (其他的空白符號也會)，不過該空格佔據的寬度會明顯受到字體的影響。

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

在HTML中編輯

 是最常用的空格

 寬度是按空白鍵的大小

  但&nbsp寬度不固定;

呈現在螢幕上的內容

 是最常用的空格

寬度是按空白鍵的大小

但 寬度不固定;

2.  

en space，en是字體排印的一個計量單位，寬度是字體寬度的一半，例如使用16點 (16px) 字體時，  的寬度就是8點，約佔 個中文字寬度。

在HTML中編輯

 的寬度只有中文字的一半

 這列有一個 

   兩個 和一個中文字同寬

呈現在螢幕上的內容

 的寬度只有中文字的一半

這列有一個 

兩個 和一個中文字同寬

3.  

em space，em是一個字元的寬度，1 em在16點字體時的寬度就是16點，此寬度是 en 的兩倍，約等於1個中文字寬。

在HTML中編輯

 的寬度和一個中文字一樣

 這列有一個 

  段落開頭可用這個空兩格

呈現在螢幕上的內容

 的寬度和一個中文字一樣

這列有一個 

段落開頭可用這個空兩格

4.  

thin space，不常用，寬度約是 em 或 em寬。

在HTML中編輯

通常不會有人使用 

 好奇還是試一下

     五個 和一中文字同寬

呈現在螢幕上的內容

通常不會有人使用 

好奇還是試一下

五個 和一中文字同寬

5. ‌

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

6.‍

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

補充一：斷行標籤
與

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

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

有，HTML還有另一個

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


在HTML中編輯




<pre>會如實呈現按下的空白


像這列中間 有三個空白


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




呈現在螢幕上的內容


會如實呈現按下的空白


像這列中間 有三個空白


前面不加
也可以換行


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


補充三：HTML Entities


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


HTML Entities是什麼？


寫文章的常常會使用到「空白」、「>」、「<」或「"」等符號，但是HTML編碼也大量使用到這些符號，所以寫作時直接使用這些符號，HTML會太混亂，讓系統無法正確編碼。


所以常用的符號都被HTML保留起來，當人類要用的時候，會用另外特定的編碼表示符號，這些編碼被稱為Entities。所以才會出現以「 」表示不斷行空白，或以「&」表示「&」的用法。另外如果有些字元或符號在鍵盤上找不到，它們也會被Entities取代。


總結


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


參考資料


HTML / 網頁當中的六種空白字元         ‌ ‍ 的差別


【code】[html]三種空白符號的用法


分享此文：


按一下以分享至 Facebook(在新視窗中開啟)


Facebook


按一下即可分享至 X(在新視窗中開啟)


X


按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)


電子郵件