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

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

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

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

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

<!doctype html><html><head><meta charset="utf-8"><title>topic.alibabacloud.com</title></head><body><p>這裡是topic.alibabacloud.com;                                       這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;</p></body></html>

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

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

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

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

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

&ensp; :“en空格”是根據字型排印學的計量單位命名,寬度是兩個普通空格的寬度

&emsp; :“em空格”大概是四個普通空格的寬度

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

我們再來細看看它們之間的區別:

<body><p>這裡是topic.alibabacloud.com;&ensp;&ensp;&ensp;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;&nbsp;&nbsp;&nbsp;這裡是topic.alibabacloud.com;這裡是PHP中文網;&emsp;&emsp;&emsp;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;這裡是topic.alibabacloud.com;</p></body>

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

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

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

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

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

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

好了,今天的這篇關於空格&nbsp;的文章就到這裡了,想學更多就來topic.alibabacloud.comhtml參考手冊欄目中學習吧。有問題的可以在下方提問。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.