Padding appears when I generate the same code from javascript

I have a simple stacked row class which shows the upper box and lower box without padding.

<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>

However when I put the same source code dynamically by javascript.

There appears the padding between two vertical boxes.

DO you think what is the cause of problem?

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());