0%

关于HTML内联元素一侧留白的浅谈

问题来源

在写代码的时候遇到了如下问题: 使用了bootstrap框架来编写了一个页面,其中input元素两侧留有空白。然而用JS动态添加的同样的元素却不会出现这种情况。具体截图表现如下: 20151226212230 我们可以发现,第一行和而三行的代码是完全一样的,可是呈现的结果是截然不同的。 在线测试样例 大家是不是觉得很奇怪?没错,我也是。中间的那个缝隙是哪里来的呢?

刨根问底

在这里感谢 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>

观察一下效果 20151226220135 嗯,果然,它的间距还是出现了。 那么改成 display: inline-block 呢?

1
2
3
4
5
.item {
display: inline-block;
width: 200px;
background: #555;
}

20151226220326 可见间距还是有的。 我们把 div 的换行去掉,看一下。 20151226220443 Perfect!它已经消失不见了! 以上,在chrome,edge,ie11测试通过。

综述

通过以上研究我们可以得出如下结论: 内联元素,代码中带有换行,会出现空白间距。块级元素,设置了内联样式,且代码中带有换行,也会出现空白间距。 解决方法是删除代码中的换行即可。 以上是在写程序过程中发现的现象,希望能对大家有帮助!