如何在HTML中插入空格

在前端開發中，有時候需要在頁面中加入空格，那麼要如何加入呢？本篇文章就跟大家介紹在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:php;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;字符ensp显示空格！</p><br />
<p class="p3">测试文字|&emsp;字符emnsp显示空格！</p>

效果圖：

#說明： 和 字元所佔據的寬度基本上不受字體影響，而且是相當穩健的。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

以上是如何在HTML中插入空格的詳細內容。更多資訊請關注PHP中文網其他相關文章！