問題需要總結(jié)却盘,知識需要沉淀
HTML提供了5種空格實體(space entity)陕靠,它們擁有不同的寬度蝶柿,非斷行空格(?)是常規(guī)空格的寬度杈曲,可適用于所有主流瀏覽器驰凛。其他幾種空格[關(guān)于這個結(jié)論担扑,我個人覺得是有問題的恰响,請看下面demo] 
 
 
‌
‍
在不同瀏覽器中寬度各異。
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dome</title>
<style type="text/css" charset="utf-8">
* {
margin: 0;
padding: 0;
}
span {
background-color: red;
}
</style>
</head>
<body>
<span>測試</span>
<span>test</span>
<span>test </span>
<span>test </span>
<span>test </span>
<span>test </span>
</body>
</html>
Note:在這個demo中我們可以看到,在不改變?yōu)g覽器默認(rèn)設(shè)置的情況下涌献,IE9+胚宦、Edge、Firefox和Chrome對于
 
燕垃、 
枢劝、 
、 
的實現(xiàn)效果是完全一樣卜壕。Ps:這里由于沒有safari瀏覽器的測試結(jié)果您旁,所以暫不下定論,希望有Mac的小伙伴看到幫忙測試一下
-
<span>test</span>
test0.png -
<span>test </span>
的寬度是4px/0.25em
test1.png -
<span>test </span>
 
的寬度是8px/0.5em
test2.png -
<span>test </span>
 
的寬度是16px/1em
test3.png -
<span>test </span>
 
的寬度是3.2px/0.2em
test4.png
Note:瀏覽器的實現(xiàn)不同之處是對于英文字符的寬度轴捎;對于空白鹤盒,在不改變?yōu)g覽器默認(rèn)設(shè)置的情況下是相同的。
-
4px/0.25em
不換行空格侦副,全稱No-Break Space侦锯,是最常見的,也是我們使用最多的空格秦驯,它是按下space鍵產(chǎn)生的空格尺碰。在HTML中,空格或者換行等都會被瀏覽器解析為一個 
,要使用html實體表示才可累加亲桥,該空格占據(jù)寬度受字體影響明顯而強烈洛心。
Wikipedia
In word processing and digital typesetting, a non-breaking space (" "), also called no-break space, non-breakable space (NBSP), hard space, or fixed space,[1] is a space character that prevents an automatic line break at its position.
In some formats, including HTML, it also prevents consecutive whitespace characters from collapsing into a single space.
In HTML, the common non-breaking space, which is the same width as the ordinary space character, is encoded as
or 
.
In Unicode, it is encoded asU+00A0
 
8px/0.5em
半角空格,全稱是En Space两曼,en是字體排印學(xué)的計量單位皂甘,為em寬度的一半。根據(jù)定義悼凑,它等同于字體度的一半(如16px字體中就是8px)偿枕。名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性:透明的户辫,此空格有個相當(dāng)穩(wěn)健的特性渐夸,就是其占據(jù)的寬度正好是1/2個中文寬度,而且基本上不受字體影響渔欢。 
16px/1em
全角空格墓塌,全稱是Em Space,em是字體排印學(xué)的計量單位奥额,相當(dāng)于當(dāng)前指定的點數(shù)苫幢。例如,1 em在16px的字體中就是16px垫挨。此空格也傳承空格家族一貫的特性:透明的韩肝,此空格也有個相當(dāng)穩(wěn)健的特性,就是其占據(jù)的寬度正好是1個中文寬度九榔,而且基本上不受字體影響哀峻。 
3.2px/0.2em
窄空格,全稱是Thin Space哲泊。我們不妨稱之為“瘦弱空格”剩蟀,就是該空格長得比較瘦弱,身體單薄切威,占據(jù)的寬度比較小育特。它是em之六分之一寬。[明明是五分之一]‌
零寬不連字先朦,全稱是Zero Width Non Joiner且预,簡稱“ZWNJ”,是一個不打印字符烙无,放在電子文本的兩個字符之間,抑制本來會發(fā)生的連字遍尺,而是以這兩個字符原本的字形來繪制截酷。Unicode中的零寬不連字字符映射為“”(zero width non-joiner,U+200C)乾戏,HTML字符值引用為:‌
;‍
零寬連字迂苛,全稱是Zero Width Joiner三热,簡稱“ZWJ”,是一個不打印字符三幻,放在某些需要復(fù)雜排版語言(如阿拉伯語就漾、印地語)的兩個字符之間,使得這兩個本不會發(fā)生連字的字符產(chǎn)生了連字效果念搬。零寬連字符的Unicode碼位是U+200D (HTML:‍
‍
)抑堡。