代码换行符_换行符对模板字符串的影响

先贴出CSS代码:

再看原始的HTML代码片段:

追加

按钮一 按钮二 按钮三

得到样式:

图一

以图一得到的按钮一、按钮二、按钮三的间距作为标准。点击追加按钮执行方法:

appendButton() {        let innerHtml =         `         

换行追加

按钮一 按钮二 按钮三

不换行追加

按钮一按钮二按钮三

`; ; //向show-buttond追加 this.elements.insertAdjacentHTML('beforeend',innerHtml);}

得到的效果图:

图二

可以很清晰的看见不换行追加得到的三个按钮间距明显小于上面两行按钮的间距。看到这里应该可以很清楚的认识到换行符对button按钮的间距产生了影响。究竟是什么原因导致间距不一致?要解决这个问题就需要到浏览器控制台查看元素的详细信息(在chrome浏览器很难发现问题出在哪里,推荐使用Firefox查看)。当打开Firefox控制台时:

图三

看这张图也就明白了为什么Button按钮间距不一致了。

若有错误欢迎指正