在前端開發中，有時候需要在頁面中加入空格，那麼要如何加入呢？本篇文章就跟大家介紹在html頁面插入空格的方法，希望對大家有幫助。 【相關影片教學推薦：HTML教學】
#一、鍵入空白
在html頁面中，我們可以鍵入「空白」鍵來插入空白。
範例：在p.p1中鍵入一個空格，在p.p2中鍵入5個空格。註：此時是半角狀態鍵入「空格」
<p class="p1">测试文字| php中文网！</p> <p class="p2">测试文字| php中文网！</p>
效果圖：
#可以看出，無論我們在HTML中是鍵入1個空格或5個空格，還是其他多個空格，網頁瀏覽器都會自動將這些空格折疊為僅一個空格。
那我們要如何顯示多個鍵入的空格呢？可以透過在全角狀態鍵入「空格」鍵，例：
<p class="p1">测试文字| php中文网！</p> <p class="p2">测试文字| php中文网！</p>
效果圖：
說明：全角空格會被解釋為漢字，以空白漢字的形式顯示，且是實數顯示（有多少就顯示多少）。
或使用
標籤來解決這個問題（半角狀態鍵入「空格」），範例：</p><pre class="brush:html;toolbar:false"><p class="p1">
<pre class="brush:php;toolbar:false">测试文字| php中文网！
测试文字| php中文网！
效果圖：
二、使用html的空格符號
我們可以使用html中表示空格的字元實體來在html頁面中插入空格，下面我們來看看在html中表示空格的字元實體有哪些：
字元：不斷行的空白格，此空格佔據的寬度受字體影響。
字元：相當全角狀態鍵入半個「空格」鍵（半個漢字的寬度）。
字元：相當全角狀態鍵入「空白」鍵（1個漢字的寬度）。
下面我們來看看效果：
<p class="p1">测试文字| 字符nbsp显示空格！</p><br / <p class="p2">测试文字| 字符ensp显示空格！</p><br /> <p class="p3">测试文字| 字符emnsp显示空格！</p>
效果圖：
#說明： 和 字元所佔據的寬度基本上不受字體影響，而且是相當穩健的。
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。
以上是如何在HTML中插入空格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
