前军教程网

先贴出CSS代码:

<style  rel="stylesheet">
    button {
      margin-bottom: 10px;
    }
    .button-margin {
      margin-left: 5px;
    }
    .show-color {
      color: red;
    }
</style>

再看原始的HTML代码片段:

 <div id="app">
    <button>追加</button>
  </div>
  <div id="show-button">
    <div>
      <button class="button-margin">按钮一</button>
      <button class="button-margin">按钮二</button>
      <button class="button-margin">按钮三</button>
    </div>
  </div>

得到样式:

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

appendButton() {
        let innerHtml =
         `
         <div class=show-color>换行追加</div>
         <div>
          <button type=button class="button-margin">按钮一</button>
          <button type=button class="button-margin">按钮二</button>
          <button type=button class="button-margin">按钮三</button>
          </div>
          <div class=show-color>不换行追加</div>
         <div>
          <button type=button class="button-margin">按钮一</button><button type=button class="button-margin">按钮二</button><button type=button class="button-margin">按钮三</button>
          </div>`;
        ;
        //向show-buttond追加
        this.elements.insertAdjacentHTML('beforeend',innerHtml);
}

得到的效果图:

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

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

若有错误欢迎指正