在写代码的时候遇到了如下问题：
使用了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测试通过。
综述
通过以上研究我们可以得出如下结论：
内联元素，代码中带有换行，会出现空白间距。块级元素，设置了内联样式，且代码中带有换行，也会出现空白间距。
解决方法是删除代码中的换行即可。
以上是在写程序过程中发现的现象，希望能对大家有帮助！
转载请注明：静觅 » 关于HTML内联元素一侧留白的浅谈
网友评论