手机html 右侧留白,HTML内联元素一侧留白

在写代码的时候遇到了如下问题：

使用了bootstrap框架来编写了一个页面，其中input元素两侧留有空白。然而用JS动态添加的同样的元素却不会出现这种情况。具体截图表现如下：

我们可以发现，第一行和而三行的代码是完全一样的，可是呈现的结果是截然不同的。

优优好房上也有同样的标签。

大家是不是觉得很奇怪？没错，我也是。中间的那个缝隙是哪里来的呢？

刨根问底

在这里感谢 wonder同学的大力相助，才得以找到问题的所在。

出现此问题的原因在于：

html中的内联元素在书写代码时，如果两元素代码之间有换行，浏览器会将其解释为空格。而这个空格是会被当作一个空白节点(nodeType等于3的节点，就是文字节点)

所以，因为代码中我使元素呈现 inline 的属性，然后两个代码之间具有换行，所以二者之间出现了空白。正常情况下，二者之间是不应该出现空白的。然而用 jQuery 生成元素的时候，因为是用的 + 连接符，所以换行符被忽略了。也就是代码是连接起来的，所以二者之间便不会出现空白。

解决方法：

1.将原代码中的input写到一行。如下：

1

2

3

2.或者在JS代码中加入换行符。如下：

1

2

3

4

5

6

$('button').on('click', function() {

$('

'+

'\n'+

''+

'

').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

点击按钮添加元素

hello1

hello2

添加

.item {

display: inline;

background: #555;

}

观察一下效果

嗯，果然，它的间距还是出现了。

那么改成 display: inline-block 呢？

1

2

3

4

5

.item {

display: inline-block;

width: 200px;

background: #555;

}

可见间距还是有的。

我们把 div 的换行去掉，看一下。

Perfect！它已经消失不见了！

以上，在chrome，edge，ie11测试通过。

综述

通过以上研究我们可以得出如下结论：

内联元素，代码中带有换行，会出现空白间距。块级元素，设置了内联样式，且代码中带有换行，也会出现空白间距。

解决方法是删除代码中的换行即可。

以上是在写程序过程中发现的现象，希望能对大家有帮助！