首頁 >web前端 >html教學 >HTML段落元素中怎麼設定空格? HTML空格的設定總結

HTML段落元素中怎麼設定空格? HTML空格的設定總結

寻∝梦
寻∝梦原創
2018-09-10 13:40:4818329瀏覽

HTML彙總的段落元素想要留點空格,但是直接打空格符號肯定是行不通的,因為瀏覽器只會顯示一個空格,不管你點多少空格都是一樣,但是今天的這個空格符 能或許能幫你這些忙,最後還有三個空格符的排名情況。讓我們一起來看這篇文章吧

首先我們先看看html段落元素中是怎麼設定空格的:

大家都知道在HTML一個段落中,想把一句話之間多給點距離,就點一個空格,但是在大多數主流瀏覽器中所有很多的空格就只會顯示一個小空格的距離出來,所以在寫代碼的時候會把空格符號給專門用出來,雖然現在用的空格符號比較少,但是在一些細節處理方面,想留一些空格的時候還是用這個空格符處理是最方便的。

現在我們來看看一個段落元素中空格符的設定:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p>这里是PHP中文网;                                       这里是PHP中文网;这里是PHP中文网;
      这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网
;这里是PHP中文网;</p>
</body>
</html>

上面程式碼把第一句話後面空了很大的一行,我們想這樣和我在後面用的空格符之間的距離誰比較大呢?

我們來看看在瀏覽器中顯示的效果圖:

HTML段落元素中怎麼設定空格? HTML空格的設定總結

我們可以很清楚的看到,第一個是用那麼多空格堆出來的空間,在瀏覽器中只會顯示那麼一點小空間,後面是空格符顯示的效果是不是比自己打空格好多了,空間頓時就大了很多。

當然我們平常一定不會要空很大的空間的,就算要空的大,那就不會用空格符。今天我們就是講的空格符 的使用,不說其它的,這個空格符對些懶人來說還是挺好用的。 (想看更多就到PHP中文網HTML開發手冊欄位學習)

我們現在再來看看還有兩個和 空格符號是一樣的,我們來看看:

  :「en空格」是根據字體排印學的計量單位命名,寬度是兩個普通空格的寬度

  :「em空格「大概是四個普通空格的寬度

都是不影響換行的空格符號。它們的使用比 稍微少一點,因為它們有時候空的空間比較大。

我們再來細看看它們之間的差異:

<body>
<p>这里是PHP中文网;&ensp;&ensp;&ensp;这里是PHP中文网;这里是PHP中文网;   这里是PHP中文网;这里是PHP中
文网;&emsp;&emsp;&emsp;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;这里是PHP中文网;</p>
</body>

在裡面加了三種空格符號,我們來看看效果:

HTML段落元素中怎麼設定空格? HTML空格的設定總結

#三種空格標籤,我們看著上面的顯示圖來給它們排個名次吧,當然網上也有很多人給這個排名的,但是我們自己說自己的,讓自己更清楚的知道就行了。

現在我們照著上面的圖片我們看看排名情況:

第一名,空的最大的當然是 ,也很明顯是把,都是三個空格符,就 最大。

第二名,也就是空的第二大的是 ,這個是空的第二大的,比最後一名的將近大了一倍。

最後一名當然就是我們本章說的 空格符了,雖然空的空間小,但是在某些地方還是很實用的。

好了,今天的這篇關於空格 的文章就到這裡了,想學更多就來PHP中文網html參考手冊欄位中學習吧。有問題的可以在下方提問。

【小編推薦】

css中的padding屬性可以是負值嗎? css中padding屬性的詳解

css偽元素有哪些? css偽元素的詳情介紹(內附實例)

#

以上是HTML段落元素中怎麼設定空格? HTML空格的設定總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn