CSS/HTML 如何在網(wǎng)頁中添加空格(瑣碎知識點整理)

之前有整理過一部分知識點, 一直沒有發(fā)布, 因為都是有關 CSS 方面的零散內(nèi)容; 現(xiàn)在想想無論做什么都需要慢慢積累, 所以還是決定將之前整理的相關內(nèi)容驗證之后慢慢分享給你們, 現(xiàn)在看到感覺還挺有意思 暂刘。

好了廢話不多說, 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗證過程的一些圖片作為分享)锣披。

  1. html空格符號代碼

1.   :一個字符的半角的不斷行的空格娇钱,如果需要在網(wǎng)頁中插入多個空格他宛,可以將“ ”代碼寫多遍描馅;

2.   :一個字符的半角的空格颈墅,也可以將“ ”寫多遍來插入多個空格存哲;

3.   :兩個字符的全角的空格,也可以將“ ”寫多遍來插入更多的空格翩剪;

4.   :小于一個字符的空格乳怎;
  1. 代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS/HTML 如何在網(wǎng)頁中添加空格(瑣碎知識點整理) </title>
</head>

<style>
.w_space-item {
  background-color: skyblue;
  height: 66px;
  line-height: 66px;
  font-size: 32px;
  margin: 32px 0;
}
.w_space-pre {
  white-space: pre;
}
</style>
<body>
<div>
<div>
  <div class="w_space-shel">
    <p class="w_space-item">空格-1: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;示例</p>
    <p class="w_space-item">空格-2: &ensp;&ensp;&ensp;&ensp;&ensp;示例</p>
    <p class="w_space-item">空格-3: &emsp;&emsp;&emsp;&emsp;&emsp;示例</p>
    <p class="w_space-item">空格-4: &thinsp;&thinsp;&thinsp;&thinsp;示例</p>
    <p class="w_space-item w_space-pre">空格:                     示例</p>
  </div>
</div>
</div>
</body>
</html>

  1. 圖片示例
c-sum.png
  1. 總結
1. 大家有沒有想過為什么要使用html空格符號代碼呢, 直接在鍵盤上敲幾個空格不是更方便嗎?當你實際操作的
時候, 你會發(fā)現(xiàn) '默認情況下前弯,無論你在html源代碼中敲幾個空格蚪缀,在瀏覽器中運行都只顯示一個空格', 所以我們
就需要使用 html 空格符號代碼來實現(xiàn)網(wǎng)頁中多個空格的效果 。

2. 前面說的前提是 "默認情況下", 為什么說在默認情況下呢? 因為我們還可以使用 css 中的 "white-space" 屬性
來實現(xiàn)多個空格的效果; 就是將 "white-space" 屬性值設置為 "pre" 即: white-space: pre; 設置之后, 瀏覽器就會
保留 html 源代碼中的空格和換行; 這下你在源代碼中敲幾個空格, 瀏覽器中運行就會用幾個空格 恕出。

3. 在軟件開發(fā)中, 都是使用 html 空格符號 代碼來實現(xiàn)多個空格的效果 询枚。

如果對你有所幫助,希望大家喜歡點個關注浙巫;整理知識點不易, 每次都是在工作繁忙之余夜深人靜之時整理, 每次整理時都在思考如何讓大家更容易理解, 更容易找到金蜀、看到自己想看到的內(nèi)容; 無論知識點是大是小, 我都會驗證后再分享, 以防自己發(fā)表的文章給大家造成誤導。如有問題還望不吝賜教的畴,本人會及時更改渊抄。(本文原創(chuàng), 如需轉(zhuǎn)載,請注明出處)苗傅。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抒线,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子渣慕,更是在濱河造成了極大的恐慌嘶炭,老刑警劉巖抱慌,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異眨猎,居然都是意外死亡抑进,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門睡陪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寺渗,“玉大人,你說我怎么就攤上這事兰迫⌒攀猓” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵汁果,是天一觀的道長涡拘。 經(jīng)常有香客問我,道長据德,這世上最難降的妖魔是什么鳄乏? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮棘利,結果婚禮上橱野,老公的妹妹穿的比我還像新娘。我一直安慰自己善玫,他們只是感情好水援,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蝌焚,像睡著了一般裹唆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上只洒,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天许帐,我揣著相機與錄音,去河邊找鬼毕谴。 笑死成畦,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的涝开。 我是一名探鬼主播循帐,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼舀武!你這毒婦竟也來了拄养?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤银舱,失蹤者是張志新(化名)和其女友劉穎瘪匿,沒想到半個月后跛梗,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡棋弥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年核偿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片顽染。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡漾岳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出粉寞,到底是詐尸還是另有隱情尼荆,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布仁锯,位于F島的核電站耀找,受9級特大地震影響翔悠,放射性物質(zhì)發(fā)生泄漏业崖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一蓄愁、第九天 我趴在偏房一處隱蔽的房頂上張望双炕。 院中可真熱鬧,春花似錦撮抓、人聲如沸妇斤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽站超。三九已至,卻和暖如春乖酬,著一層夾襖步出監(jiān)牢的瞬間死相,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工咬像, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留算撮,地道東北人。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓县昂,卻偏偏與公主長得像肮柜,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子倒彰,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

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