CSS: HTML中5種空白的顯示

問題需要總結(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&nbsp;</span>
    <span>test&ensp;</span>
    <span>test&emsp;</span>
    <span>test&thinsp;</span>
</body>
</html>

網(wǎng)頁中空白間距的大小.jpg

Note:在這個demo中我們可以看到,在不改變?yōu)g覽器默認(rèn)設(shè)置的情況下涌献,IE9+胚宦、Edge、Firefox和Chrome對于&nbsp燕垃、&ensp;枢劝、&emsp;&thinsp;的實現(xiàn)效果是完全一樣卜壕。Ps:這里由于沒有safari瀏覽器的測試結(jié)果您旁,所以暫不下定論,希望有Mac的小伙伴看到幫忙測試一下

  • <span>test</span>

    test0.png

  • <span>test&nbsp;</span>
    &nbsp;的寬度是4px/0.25em

    test1.png

  • <span>test&ensp;</span>
    &ensp;的寬度是8px/0.5em

    test2.png

  • <span>test&emsp;</span>
    &emsp;的寬度是16px/1em

    test3.png

  • <span>test&thinsp;</span>
    &thinsp;的寬度是3.2px/0.2em

    test4.png

Note:瀏覽器的實現(xiàn)不同之處是對于英文字符的寬度轴捎;對于空白鹤盒,在不改變?yōu)g覽器默認(rèn)設(shè)置的情況下是相同的。

  1. &nbsp; 4px/0.25em
    不換行空格侦副,全稱No-Break Space侦锯,是最常見的,也是我們使用最多的空格秦驯,它是按下space鍵產(chǎn)生的空格尺碰。在HTML中,空格或者換行等都會被瀏覽器解析為一個&nbsp,要使用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 &nbsp; or &#160;.
In Unicode, it is encoded as U+00A0

  1. &ensp; 8px/0.5em
    半角空格,全稱是En Space两曼,en是字體排印學(xué)的計量單位皂甘,為em寬度的一半。根據(jù)定義悼凑,它等同于字體度的一半(如16px字體中就是8px)偿枕。名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性:透明的户辫,此空格有個相當(dāng)穩(wěn)健的特性渐夸,就是其占據(jù)的寬度正好是1/2個中文寬度,而且基本上不受字體影響渔欢。

  2. &emsp; 16px/1em
    全角空格墓塌,全稱是Em Space,em是字體排印學(xué)的計量單位奥额,相當(dāng)于當(dāng)前指定的點數(shù)苫幢。例如,1 em在16px的字體中就是16px垫挨。此空格也傳承空格家族一貫的特性:透明的韩肝,此空格也有個相當(dāng)穩(wěn)健的特性,就是其占據(jù)的寬度正好是1個中文寬度九榔,而且基本上不受字體影響哀峻。

  3. &thinsp; 3.2px/0.2em
    窄空格,全稱是Thin Space哲泊。我們不妨稱之為“瘦弱空格”剩蟀,就是該空格長得比較瘦弱,身體單薄切威,占據(jù)的寬度比較小育特。它是em之六分之一寬。[明明是五分之一]

  4. &zwnj;
    零寬不連字先朦,全稱是Zero Width Non Joiner且预,簡稱“ZWNJ”,是一個不打印字符烙无,放在電子文本的兩個字符之間,抑制本來會發(fā)生的連字遍尺,而是以這兩個字符原本的字形來繪制截酷。Unicode中的零寬不連字字符映射為“”(zero width non-joiner,U+200C)乾戏,HTML字符值引用為: &#8204;

  5. &zwj;
    零寬連字迂苛,全稱是Zero Width Joiner三热,簡稱“ZWJ”,是一個不打印字符三幻,放在某些需要復(fù)雜排版語言(如阿拉伯語就漾、印地語)的兩個字符之間,使得這兩個本不會發(fā)生連字的字符產(chǎn)生了連字效果念搬。零寬連字符的Unicode碼位是U+200D (HTML: &#8205; &zwj;)抑堡。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市朗徊,隨后出現(xiàn)的幾起案子首妖,更是在濱河造成了極大的恐慌,老刑警劉巖爷恳,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件有缆,死亡現(xiàn)場離奇詭異,居然都是意外死亡温亲,警方通過查閱死者的電腦和手機棚壁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來栈虚,“玉大人袖外,你說我怎么就攤上這事〗诮妫” “怎么了在刺?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長头镊。 經(jīng)常有香客問我蚣驼,道長,這世上最難降的妖魔是什么相艇? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任颖杏,我火速辦了婚禮,結(jié)果婚禮上坛芽,老公的妹妹穿的比我還像新娘留储。我一直安慰自己,他們只是感情好咙轩,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布获讳。 她就那樣靜靜地躺著,像睡著了一般活喊。 火紅的嫁衣襯著肌膚如雪丐膝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機與錄音帅矗,去河邊找鬼偎肃。 笑死,一個胖子當(dāng)著我的面吹牛浑此,可吹牛的內(nèi)容都是我干的累颂。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼凛俱,長吁一口氣:“原來是場噩夢啊……” “哼紊馏!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起最冰,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤瘦棋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后暖哨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赌朋,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年篇裁,在試婚紗的時候發(fā)現(xiàn)自己被綠了沛慢。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡达布,死狀恐怖团甲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情黍聂,我是刑警寧澤躺苦,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站产还,受9級特大地震影響匹厘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜脐区,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一愈诚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧牛隅,春花似錦炕柔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至默伍,卻和暖如春哩罪,著一層夾襖步出監(jiān)牢的瞬間授霸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工际插, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人显设。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓框弛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捕捂。 傳聞我的和親對象是個殘疾皇子瑟枫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容