最近在使用bootstrap的轮播图插件carousel时，发现页面样式与插件文档样式不一样，主要是多个li元素间距不同，对比如下图：

我实现的页面：

插件文档提供的页面：

可以看到，我实现的页面中li间距过短。对两个页面仔细对比，发现css没有区别，没办法只能自己加了一个3px的外边距，效果如下：

间距可以了，但是破坏了bootstrap动态修改的margin效果，还是很丑。

其实检查插件文档的li标签可以发现，两个li标签间有一段间距不属于li的margin，应该是来自其他元素，如下图：

对比代码后可以发现，插件文档中li标签间是有换行符的，而我的页面轮播图部分由于是js动态生成的，li标签间没有换行符，js生成的代码如下：

<ol class="carousel-indicators" style="bottom: 5%;"><li data-target="#frontHome_carousel" data-slide-to="0" class=""></li><li data-target="#frontHome_carousel" data-slide-to="1" class="active"></li></ol>

修改代码，加入换行字符\n后就可以实现插件文档的样式了，如下图：

生成的代码如下：

<ol class="carousel-indicators" style="bottom: 5%;"><li data-target="#frontHome_carousel" data-slide-to="0" class="active"></li>
<li data-target="#frontHome_carousel" data-slide-to="1" class=""></li>

</ol>

总结：是个小问题，但是找不到原因很闹心。网上有人总结的是浏览器会把换行字符解释为一个3px的空格，以后页面上一些莫名其妙的间距空格可以先检查这一点。