在寫代碼的時候遇到了如下問題：
使用了bootstrap框架來編寫了一個頁面，其中input元素兩側(cè)留有空白纤怒。然而用JS動態(tài)添加的同樣的元素卻不會出現(xiàn)這種情況糯而。具體截圖表現(xiàn)如下：
我們可以發(fā)現(xiàn)，第一行和而三行的代碼是完全一樣的泊窘，可是呈現(xiàn)的結(jié)果是截然不同的熄驼。
優(yōu)優(yōu)好房上也有同樣的標(biāo)簽。
大家是不是覺得很奇怪烘豹？沒錯谜洽，我也是。中間的那個縫隙是哪里來的呢吴叶？
刨根問底
在這里感謝?wonder同學(xué)的大力相助阐虚，才得以找到問題的所在。
出現(xiàn)此問題的原因在于：
html中的內(nèi)聯(lián)元素在書寫代碼時蚌卤，如果兩元素代碼之間有換行实束，瀏覽器會將其解釋為空格。而這個空格是會被當(dāng)作一個空白節(jié)點(diǎn)（nodeType等于3的節(jié)點(diǎn)逊彭，就是文字節(jié)點(diǎn)）
所以咸灿，因?yàn)榇a中我使元素呈現(xiàn) inline 的屬性，然后兩個代碼之間具有換行侮叮，所以二者之間出現(xiàn)了空白避矢。正常情況下，二者之間是不應(yīng)該出現(xiàn)空白的囊榜。然而用 jQuery 生成元素的時候审胸，因?yàn)槭怯玫?+ 連接符，所以換行符被忽略了卸勺。也就是代碼是連接起來的砂沛，所以二者之間便不會出現(xiàn)空白。
解決方法：
1.將原代碼中的input寫到一行曙求。如下：
1
2
3
<div class="form-group">
????<input class="form-control inline span3" name="education[school][]" type="text" value="123"><input class="form-control inline span3" name="education[date][]" type="text" value="456">
</div>
2.或者在JS代碼中加入換行符碍庵。如下：
1
2
3
4
5
6
$('button').on('click', function() {
????????$('<div class="form-group">'+
????????????'<input class="form-control inline span3" name="education[school][]" type="text" value="">\n'+
????????????'<input class="form-control inline span3" name="education[date][]" type="text" value="">'+
????????'</div>').appendTo($(".content"));
????});
以上兩種方式，解決方法都比較簡單實(shí)用悟狱。其他的改變 padding 或者 margin 的方法就不推薦了静浴。
好了，那么明白了之后挤渐，我們肯定要可以舉一反三的苹享，來探究一下如果是塊級元素會不會這樣呢？
舉一反三
好的挣菲，讓我們試一下塊級元素如果設(shè)置為 inline的話會不會也這樣富稻。
把 input 標(biāo)簽改成 div，然后給它加上 display: inline 屬性白胀，加一下背景顏色區(qū)分椭赋，觀察一下效果。
代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="zh-CN">
??<head>
????<meta charset="utf-8">
????<meta http-equiv="X-UA-Compatible" content="IE=edge">
????<meta name="viewport" content="width=device-width, initial-scale=1">
????<link rel="stylesheet" >
??</head>
??<body>
????<h1>點(diǎn)擊按鈕添加元素</h1>
????<div class="content">
????????<div class="form-group">
????????????<div class="item">hello1</div>
????????????<div class="item">hello2</div>
????????</div>
????</div>
????<button class="btn btn-primary">添加</button>
????<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
????<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
????<style>
????.item {
????????display: inline;
????????background: #555;
????}
????</style>
??</body>
</html>
觀察一下效果
嗯或杠，果然哪怔，它的間距還是出現(xiàn)了。
那么改成 display: inline-block 呢向抢？
1
2
3
4
5
.item {
????????display: inline-block;
????????width: 200px;
????????background: #555;
????}
可見間距還是有的认境。
我們把 div 的換行去掉，看一下挟鸠。
Perfect叉信！它已經(jīng)消失不見了！
以上艘希，在chrome硼身，edge，ie11測試通過覆享。
綜述
通過以上研究我們可以得出如下結(jié)論：
內(nèi)聯(lián)元素佳遂，代碼中帶有換行，會出現(xiàn)空白間距撒顿。塊級元素丑罪，設(shè)置了內(nèi)聯(lián)樣式，且代碼中帶有換行凤壁，也會出現(xiàn)空白間距吩屹。
解決方法是刪除代碼中的換行即可。
以上是在寫程序過程中發(fā)現(xiàn)的現(xiàn)象拧抖，希望能對大家有幫助祟峦！
轉(zhuǎn)載請注明：靜覓???關(guān)于HTML內(nèi)聯(lián)元素一側(cè)留白的淺談
