HTML / 網頁當中的六種空白字元  &ensp - Charles Note

1.   不換行空格 · 2.   半形空格 · 3.   全形空格 · 4.   窄空格 · 5. ‌‌ · 6. ‍‍ · 單純只是想要輸入空白？ Skiptocontent 在HTML當中，空格(space)不僅僅就是空格這麼簡單的事，它其實有六種不同樣的空格。

如果你有編輯網頁或在網路上寫文章的經驗，肯定會發現當你連續輸入好幾個空格的時候，它永遠都只會有一個空格，甚至是被當作”無內容”來解析。

這是因為瀏覽器在遇到空格的時候，如果它認為這是一串字串，那麼空格就會被當作空格但不會累計，不管你輸入再多個空格它還是只會有一個。

空格在HTML當中被視為是特殊符號的一種，在網頁當中如果想要正確的加入空格，就必須用HTML的語法輸入。

HTML提供了六種不同種類的空格，其中最大的差異在於寬度上的不同。

1. 不換行空格 No-BreakSpace，不換行空格。

這是最常見的空格，也是一般我們鍵盤按下空白鑑會出現的字元。

大部分來說我們只會使用這樣的空白，輸入多次 空格也會累計。

 的空格寬度會受字體影響。

2. 半形空格 EnSpace，半形空格。

en是一個半型字元寬度的單位，寬度為em的一半。

例如當16px大小的字體，半形就是8px的寬度。

就定義上來說，一個en就是小寫字母n的寬度，大約是半個中文字寬。

3. 全形空格 EmSpace，全形空格。

和半形空格同概念，em是一個全形字元的寬度，如果字體大小是16px，一個em就是16px，大約等於一個中文字寬。

4. 窄空格 窄空格，顧名思義就是寬度較窄的空格，大約是1/6個em寬。

5.‌‌ 全名是ZeroWidthNonJoiner，這通常是用於比較複雜的文字或特殊符號當中。

首先零寬度表示這個空白不會被顯示出來，它用於分隔兩個字元排列在一起而可能發生的“連字”。

也就是說，它是一個分隔元素切開兩個字元，讓它們各自產生自己相對應的文字。

6.‍‍ 全名是ZeroWidthJoiner。

與ZWNJ相同的是它也是零寬度的空格，並不會被顯示在頁面上。

但相反的是，它會觸發前後兩字元的連字效果。

這通常是用於較複雜的語言，例如阿拉伯語或印地語等 單純只是想要輸入空白？ 就對了！ 大部分的狀況我們還是只會用到最一般的 空白字元，例如想要連續輸入好幾個空格的時候。

或是想要放一個空白的元素，例如

與

 

就會被瀏覽器解析為不同的狀況。

前者等同於無內容的元素，不會在頁面上顯示任何東西；後者則是一個段落元素中包含一個空白字元，所以我們可以在頁面上看到一個段落的存在，同時裡面還包裹著一個空白。

除了第一種空白之外，其他五種的空格也要看瀏覽器有沒有支援，且寬度也可能有些許影響，不太常用。

這篇文章的標題列，實際在編輯器當中長的樣子 除了空白之外，還有很多其他的特殊字元被定義在Unicode和HTML當中，例如&這個and符號它在HTML當中也被定義為&。

像我在寫這篇文章的時候也遇到很多的麻煩，常常需要轉換到原始碼編輯器去直接編輯原始碼，否者都會出現一些不可預期的結果。

Copyrightannouncement:thefeaturedimage:Photoby PatrickFore on Unsplash Postnavigation PreviousPost CSS/透過CSS隱藏網頁上的元件方法，visibility:hidden和display:none有什麼不同？PreviousPostNextPost Tech/蘋果Macbook和iPhone的螢幕解析度、尺寸比較表NextPost Onethoughton“HTML/網頁當中的六種空白字元    ‌‍的差別” 感謝教學。

Reply LeaveaReplyCancelreplyYouremailaddresswillnotbepublished.Requiredfieldsaremarked*CommentName* Email* Website Savemyname,email,andwebsiteinthisbrowserforthenexttimeIcomment. Searchfor: RecentPosts SQLServer/取得資料表使用的容量大小 影音剪輯/使用ffmpeg分割影片(指定開始及結束時間或固定時間長度分割) 影音剪輯/使用ffmpeg指令合併影片及聲音檔(直接複製資料不重新編碼) Python/解決pip安裝套件時遇到SSLCERTIFICATE_VERIFY_FAILED WordPress/如何讓Enlightersourcecode在小螢幕上自動出現水平卷軸 RecentCommentsCharlesonPython/如何在建立SQLite資料庫並在python中執行SQLScriptCharlesonWordPress/搬家教學：一個按鍵幫網站搬家，使用All-in-OneMigrationmomoonWordPress/搬家教學：一個按鍵幫網站搬家，使用All-in-OneMigrationgconPython/如何在建立SQLite資料庫並在python中執行SQLScriptEllisonHTML/網頁當中的六種空白字元    ‌‍的差別Archives August2021 June2021 May2021 April2021 April2020 March2020 November2019 September2019 August2019 Categories Computer電腦 CSS Design設計 EnglishPost Front-end網頁前端 GoogleCloud HTML LifeTech生活科技 MacOS MySQL Programming Python SQLServer SQLite Tech科技 Windows WordPress Meta Login Entriesfeed Commentsfeed WordPress.org NewsletterCategories Computer電腦 CSS Design設計 EnglishPost Front-end網頁前端 GoogleCloud HTML LifeTech生活科技 MacOS MySQL Programming Python SQLServer SQLite Tech科技 Windows WordPress RecentPosts SQLServer/取得資料表使用的容量大小 影音剪輯/使用ffmpeg分割影片(指定開始及結束時間或固定時間長度分割) 影音剪輯/使用ffmpeg指令合併影片及聲音檔(直接複製資料不重新編碼) Python/解決pip安裝套件時遇到SSLCERTIFICATE_VERIFY_FAILED WordPress/如何讓Enlightersourcecode在小螢幕上自動出現水平卷軸 Meta Login Entriesfeed Commentsfeed WordPress.org Newsletter