当我从javascript生成相同的代码时，会出现填充

我有一个简单的堆叠行类，它显示没有填充的上框和下框

<span id="route" class="small">
<div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    </div>
</div>

<div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
        <p>LowereBox</p>
        <p>LowereBox</p>
        <p>LowereBox</p>
    </div>
</div>
</span>

大写字母

大写字母

大写字母

大写字母

LowereBox

LowereBox

LowereBox

但是，当我通过javascript动态放置相同的源代码时

在两个垂直框之间出现填充

你认为问题的原因是什么

div.push(`
  <div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    </div>
  </div>
`);

div.push(`
  <div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
        <p>LowereBox</p>
        <p>LowereBox</p>
        <p>LowereBox</p>
    </div>
  </div>
`);

$('#route').html(div.join());

div.push(`
大写字母

大写字母

大写字母

大写字母

`);
俯冲(`
LowereBox

LowereBox

LowereBox

`);
$（'#route'）.html（div.join（））；

您只需指定连接分隔符，默认情况下它是

，

逗号，将其改为空

。连接（“”）

如：

$('#route').html(div.join(''));  

let div=[]；
俯冲(`
大写字母

大写字母

大写字母

大写字母

`);
俯冲(`
LowereBox

LowereBox

LowereBox

`);
$（'#route'）.html（div.join（''）

请使用演示问题的示例更新您的问题，最好是使用堆栈片段（
[]
工具栏按钮；）运行的问题。可以使用
.join（“”）
？由于没有指定分隔符，因此将使用逗号连接。您的第二个分隔符在两个div之间比第一个分隔符之间有更多的空格（甚至忽略@shrys关于
连接的优点）。在HTML中，一个空格和一个空格的使用应该无关紧要，但是…有一个基本的问题：这是无效的HTML。你不能把a放在a里面。
span
的内容模型是短语内容，但是
div
s在流内容（和
dl
s）中有效。当你向浏览器显示无效的HTML时，它可以自由地做任何它想做的事情，包括重新排序。你应该提到你还删除了其他空白。非常感谢！！它击中了我的唾沫！！！很长一段时间以来，我一直在努力寻找唯一的标签…但是Javascript上有一个问题