问题来源
在写代码的时候遇到了如下问题： 使用了 bootstrap 框架来编写了一个页面，其中 input 元素两侧留有空白。然而用 JS 动态添加的同样的元素却不会出现这种情况。具体截图表现如下： 
我们可以发现，第一行和而三行的代码是完全一样的，可是呈现的结果是截然不同的。 在线测试样例 大家是不是觉得很奇怪？没错，我也是。中间的那个缝隙是哪里来的呢？
刨根问底
在这里感谢 wonder 同学的大力相助，才得以找到问题的所在。 出现此问题的原因在于：
html 中的内联元素在书写代码时，如果两元素代码之间有换行，浏览器会将其解释为空格。而这个空格是会被当作一个空白节点（nodeType 等于 3 的节点，就是文字节点）
所以，因为代码中我使元素呈现 inline 的属性，然后两个代码之间具有换行，所以二者之间出现了空白。正常情况下，二者之间是不应该出现空白的。然而用 jQuery 生成元素的时候，因为是用的 + 连接符，所以换行符被忽略了。也就是代码是连接起来的，所以二者之间便不会出现空白。 解决方法： 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"));
});
|
以上两种方式，解决方法都比较简单实用。其他的改变 padding 或者 margin 的方法就不推荐了。 好了，那么明白了之后，我们肯定要可以举一反三的，来探究一下如果是块级元素会不会这样呢？
举一反三
好的，让我们试一下块级元素如果设置为 inline 的话会不会也这样。 把 input 标签改成 div，然后给它加上 display: inline 属性，加一下背景颜色区分，观察一下效果。 代码如下：
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" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>点击按钮添加元素</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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.item {
display: inline;
background: #555;
}
</style>
</body>
</html>
|
观察一下效果 
嗯，果然，它的间距还是出现了。 那么改成 display: inline-block 呢？
1
2
3
4
5
|
.item {
display: inline-block;
width: 200px;
background: #555;
}
|
可见间距还是有的。 我们把 div 的换行去掉，看一下。 
Perfect！它已经消失不见了！ 以上，在 chrome，edge，ie11 测试通过。
综述
通过以上研究我们可以得出如下结论： 内联元素，代码中带有换行，会出现空白间距。块级元素，设置了内联样式，且代码中带有换行，也会出现空白间距。 解决方法是删除代码中的换行即可。 以上是在写程序过程中发现的现象，希望能对大家有帮助！
